How Do I Add Href="" To This Code?

amitamberker · December 27, 2011

Hello Everyone, How do I add href="" in JavaScript code?~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...ransitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Transitions</title><style type="text/css"> .Size{width: 277px;height: 179px;}.noborder {border-width: 0px;} </style> <script type="text/javascript"> /*<![CDATA[*//*---->*/ // The /*<![CDATA[*//*---->*/ is used to force the html validator to read the JavaScript as Text and not as html code. // Image1 = new Object();Image1.src = "images/Red.jpg" Image2 = new Object();Image2.src = "images/Green.jpg" Image3 = new Object();Image3.src = "images/Blue.jpg" step = 1;speed = 5;max = 3 function animation(){if (!document.images)returnif (document.all)slide.filters.blendTrans.apply()document.images.slide.src=eval("Image"+step+".src")if (document.all)slide.filters.blendTrans.play()whichimage=stepif (step<max)step++elsestep=1if (document.all)setTimeout("animation()",speed*500)elsesetTimeout("animation()",speed*500)} window.onerror=animation /*--*//*]]>*/ </script> </head> <body> <div class="Size"><a id="slide_link" href="#"><img src="images/Red.jpg" name="slide" style="filter:blendTrans(duration=2)" class="noborder" /></a><script>animation();</script></div> </body> </html>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

JamesB · December 27, 2011

http://www.w3schools.com/jsref/dom_obj_anchor.asp

document.getElementById('slide_link').href = '';

amitamberker · January 3, 2012

http://www.w3schools..._obj_anchor.asp
document.getElementById('slide_link').href = '';

Hi JamesB,Thanks for your reply. But it's not working.....

Image1 = new Object();Image1.src = "images/Red.jpg"document.getElementById('images/Red.jpg').href = 'https://www.google.com/';

amitamberker · January 3, 2012

Looking forward to hear from someone.Please help...

DarkxPunk · January 3, 2012

First images/Red.jpg is not a id it's a path. Second href is used usually in the element a.What you want to do is thisJavaScript

document.getElementById('slide_link').href = 'http://www.google.com';

HTML

<a id="slide_link" href=""><img /></a>

I simplified it but thats how it needs to work.

regicidedelferoz · January 3, 2012

document.getElementById('slide_link').setAttribute("href", "your link here");

amitamberker · January 3, 2012

First images/Red.jpg is not a id it's a path. Second href is used usually in the element a. What you want to do is this JavaScript
document.getElementById('slide_link').href = 'http://www.google.com';
HTML
<a id="slide_link" href=""><img /></a>
I simplified it but thats how it needs to work.

Hi DarkxPunk, Thanks for your reply. Now the Transitions is not happening

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...ransitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Transitions</title><style type="text/css">.Size{ width: 277px; height: 179px;}.noborder {border-width: 0px;}</style><script type="text/javascript">/*<![CDATA[*//*---->*/// The /*<![CDATA[*//*---->*/ is used to force the html validator to read the JavaScript as Text and not as html code. // Image1 = new Object();Image1.src = "images/Red.jpg"document.getElementById('slide_link').href = 'http://www.google.com';Image2 = new Object();Image2.src = "images/Green.jpg"document.getElementById('slide_link').href = 'http://www.yahoo.com';Image3 = new Object();Image3.src = "images/Blue.jpg"document.getElementById('slide_link').href = 'http://www.cnn.com';step = 1;speed = 5;max = 3function animation() { if (!document.images) return if (document.all) slide.filters.blendTrans.apply() document.images.slide.src=eval("Image"+step+".src") if (document.all) slide.filters.blendTrans.play() whichimage=step if (step<max) step++ else step=1 if (document.all) setTimeout("animation()",speed*500) else setTimeout("animation()",speed*500) } window.onerror=animation /*--*//*]]>*/</script> </head><body><div class="Size"><a id="slide_link" href="#"><img src="images/Red.jpg" name="slide" style="filter:blendTrans(duration=2)" class="noborder" /></a><script>animation();</script></div></body></html>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

thescientist · January 3, 2012

are you checking for errors? I wouldn't suggesting using blendTrans, it is proprietary to IE and won't work in other browsers. also, what is this?

<script>animation();</script>

also, why are you assigning a reference to the animation function in window.onerror? Did you mean window.onload?

regicidedelferoz · January 4, 2012

have you tried my code, sir?,.

document.getElementById('slide_link').setAttribute("href", "your link here");

here's the whole code..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...ransitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Transitions</title><style type="text/css">.Size{width: 277px;height: 179px;}.noborder {border-width: 0px;}</style><script type="text/javascript">/*<![CDATA[*//*---->*/// The /*<![CDATA[*//*---->*/ is used to force the html validator to read the JavaScript as Text and not as html code. //Image1 = new Object();Image1.src = "http://friendster.layoutlocator.com/graphics/dldimg/f5e9efdef56d8d132b4b87749dd753b2_a15f926a7ae3edd0a5c2096d775ac902.gif"Image2 = new Object();Image2.src = "http://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Ski_trail_rating_symbol-green_circle.svg/600px-Ski_trail_rating_symbol-green_circle.svg.png"Image3 = new Object();Image3.src = "http://hs-geometry.pbworks.com/f/1237380844/1237380844/Blue%20Circle.1204020872.jpg"step = 1;speed = 5;max = 3function animation(){if (!document.images)returnif (document.all)slide.filters.blendTrans.apply()document.images.slide.src=eval("Image"+step+".src")document.getElementById('slide_link').setAttribute("href", "your link here");if (document.all)slide.filters.blendTrans.play()whichimage=stepif (step<max)step++elsestep=1if (document.all)setTimeout("animation()",speed*500)elsesetTimeout("animation()",speed*500)}window.onerror=animation/*--*//*]]>*/</script></head><body><div class="Size"><a id="slide_link" href="#"><img src="http://friendster.layoutlocator.com/graphics/dldimg/f5e9efdef56d8d132b4b87749dd753b2_a15f926a7ae3edd0a5c2096d775ac902.gif" name="slide" style="filter:blendTrans(duration=2)" class="noborder" /></a><script>animation();</script></div></body></html>

DarkxPunk · January 4, 2012

Regicide Del Feroz has got it right, but my javascript will work too. Hope this all works for yeah.

regicidedelferoz · January 4, 2012

thanks bro :good:

amitamberker · January 4, 2012

It's not working yet............................

thescientist · January 4, 2012

It's not working yet............................

well, what's your code now? what did you try from all the latest advice given to you? what errors are you getting? etc.

regicidedelferoz · January 5, 2012

It's not working yet............................

even the code i gave?,. i tested it and it's working well,. post again your code here.,

amitamberker · January 7, 2012

Hi thescientist and Regicide Del Feroz,My Code looks like this: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Transitions</title><style type="text/css">.Size{ width: 277px; height: 179px;}.noborder { border-width: 0px;}</style><script type="text/javascript">/*<![CDATA[*//*---->*/// The /*<![CDATA[*//*---->*/ is used to force the html validator to read the JavaScript as Text and not as html code. // Image1 = new Object();Image1.src = "images/Red.jpg"document.getElementById('slide_link').href = 'http://www.google.com'; Image2 = new Object();Image2.src = "images/Green.jpg"document.getElementById('slide_link').href = 'http://www.yahoo.com'; Image3 = new Object();Image3.src = "images/Blue.jpg"document.getElementById('slide_link').href = 'http://www.cnn.com'; step = 1;speed = 5;max = 3function animation() { if (!document.images) return if (document.all) slide.filters.blendTrans.apply() document.images.slide.src=eval("Image"+step+".src") if (document.all) slide.filters.blendTrans.play() whichimage=step if (step<max) step++ else step=1 if (document.all) setTimeout("animation()",speed*500) else setTimeout("animation()",speed*500) } window.onerror=animation /*--*//*]]>*/</script></head><body><div class="Size"><a id="slide_link" href="#"><img src="images/Red.jpg" name="slide" style="filter:blendTrans(duration=2)" class="noborder" /></a><script>animation();</script></div></body></html>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

buszter · January 7, 2012

helloI have a prestashop and there I'd like to make a popup script to check people do they have 18 years old.I thought I'd use this <html><head><script type="text/javascript">function show_confirm(){var r=confirm("Press a button");if (r==true) { alert("You pressed OK!"); }else { alert("You pressed Cancel!"); }}</script></head><body> <input type="button" onclick="show_confirm()" value="Show confirm box" /> </body></html> Here I wanted to change that when clkick on OK button than goes to the site when click on the cancel button goes to the google. I dont know javascript just html. and what are fount href links are all not good here.so can you help me with this ? Thenks already for your help. ps. I hope my question is in the good topic. if not than millons sorry.

amitamberker · January 7, 2012

helloI have a prestashop and there I'd like to make a popup script to check people do they have 18 years old.I thought I'd use this <html><head><script type="text/javascript">function show_confirm(){var r=confirm("Press a button");if (r==true) { alert("You pressed OK!"); }else { alert("You pressed Cancel!"); }}</script></head><body> <input type="button" onclick="show_confirm()" value="Show confirm box" /> </body></html> Here I wanted to change that when clkick on OK button than goes to the site when click on the cancel button goes to the google. I dont know javascript just html. and what are fount href links are all not good here.so can you help me with this ? Thenks already for your help. ps. I hope my question is in the good topic. if not than millons sorry.

Hi buszter,Your post is in a wrong topic. Please make your post as a New Topic.

thescientist · January 7, 2012

Hi thescientist and Regicide Del Feroz, My Code looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]http://www.w3.org/TR...ransitional.dtd[/url]"><html xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/url]"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Transitions</title><style type="text/css">.Size{	width: 277px;	height: 179px;}.noborder {border-width: 0px;}</style><script type="text/javascript"> Image1 = new Object();Image1.src = "images/Red.jpg"document.getElementById('slide_link').href = 'http://www.google.com'; Image2 = new Object();Image2.src = "images/Green.jpg"document.getElementById('slide_link').href = 'http://www.yahoo.com'; Image3 = new Object();Image3.src = "images/Blue.jpg"document.getElementById('slide_link').href = 'http://www.cnn.com'; step = 1;speed = 5;max = 3function animation()   {  if (!document.images)  return  if (document.all)  slide.filters.blendTrans.apply()  document.images.slide.src=eval("Image"+step+".src")  if (document.all)  slide.filters.blendTrans.play()  whichimage=step  if (step<max)  step++  else  step=1  if (document.all)  setTimeout("animation()",speed*500)  else  setTimeout("animation()",speed*500)  }  window.onerror=animation /*--*//*]]>*/</script> </head><body><div class="Size"><a id="slide_link" href="#"><img src="images/Red.jpg" name="slide" style="filter:blendTrans(duration=2)" class="noborder" /></a><script>animation();</script></div></body></html>[b]

[/b]

ok. what are you doing to debug the code? have you checked for errors? Have you added alert/log statements to track your code's execution to find out where it might be breaking? In other words, what have you tried to figure out the problem for yourself? also, what's the point of the conditional here if the code paths do the same thing?

  if (document.all)  setTimeout("animation()",speed*500)  else  setTimeout("animation()",speed*500)  }

also, it's better practice to pass a reference to time functions instead of a string, i.e.

setTimeout(animation,speed*500)

thescientist · January 7, 2012

helloI have a prestashop and there I'd like to make a popup script to check people do they have 18 years old.I thought I'd use this <html><head><script type="text/javascript">function show_confirm(){var r=confirm("Press a button");if (r==true) { alert("You pressed OK!"); }else { alert("You pressed Cancel!"); }}</script></head><body> <input type="button" onclick="show_confirm()" value="Show confirm box" /> </body></html> Here I wanted to change that when clkick on OK button than goes to the site when click on the cancel button goes to the google. I dont know javascript just html. and what are fount href links are all not good here.so can you help me with this ? Thenks already for your help. ps. I hope my question is in the good topic. if not than millons sorry.

please start your own thred if you have a question about an unrelated topic.

regicidedelferoz · January 9, 2012

try this one,. i tested it and it's working,.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...ransitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Transitions</title><style type="text/css">.Size{width: 277px;height: 179px;}.noborder {border-width: 0px;}</style><script type="text/javascript">/*<![CDATA[*//*---->*/// The /*<![CDATA[*//*---->*/ is used to force the html validator to read the JavaScript as Text and not as html code. //Image1 = new Object();Image1.src = "http://www.homeschoolarts.com/k6images/beach_scene/sun-red-circle.gif"ImageLink1 = 'link 1';Image2 = new Object();Image2.src = "http://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Ski_trail_rating_symbol-green_circle.svg/600px-Ski_trail_rating_symbol-green_circle.svg.png"ImageLink2 = 'link 2';Image3 = new Object();Image3.src = "http://upload.wikimedia.org/wikipedia/commons/3/38/Blue_circle_with_white_highlight.svg"ImageLink3 = 'link 3';step = 1;speed = 5;max = 3function animation(){if (!document.images)returnif (document.all)slide.filters.blendTrans.apply()document.images.slide.src=eval("Image"+step+".src")document.getElementById('slide_link').setAttribute("href", "ImageLink"+step);if (document.all)slide.filters.blendTrans.play()whichimage=stepif (step<max)step++elsestep=1if (document.all)setTimeout("animation()",speed*500)elsesetTimeout("animation()",speed*500)}window.onerror=animation/*--*//*]]>*/</script></head><body><div class="Size"><a id="slide_link" href="#"><img src="http://www.homeschoolarts.com/k6images/beach_scene/sun-red-circle.gif" name="slide" style="filter:blendTrans(duration=2)" class="noborder" /></a><script>animation();</script></div></body></html>

but everytime the image has changed, you have to point the mouse outside the image then point it again on the image,.

amitamberker · January 10, 2012

Hi Regicide Del Feroz,That code is not working

dsonesuk · January 10, 2012

you code only works in IE (But! even the svg image won't show in IE7 + probably need plugin? of some sort), to target both you would have to use a similar code to below

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Transitions</title><style type="text/css"> .Size{width: 277px;height: 179px;}.noborder {border-width: 0px;} </style> <script type="text/javascript"> /*<![CDATA[*//*---->*/ // The /*<![CDATA[*//*---->*/ is used to force the html validator to read the JavaScript as Text and not as html code. // Image1 = new Object();Image1.src = "http://www.homeschoolarts.com/k6images/beach_scene/sun-red-circle.gif"ImageLink1 = 'link 1'; Image2 = new Object();Image2.src = "http://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Ski_trail_rating_symbol-green_circle.svg/600px-Ski_trail_rating_symbol-green_circle.svg.png"ImageLink2 = 'link 2'; Image3 = new Object();Image3.src = "http://upload.wikimedia.org/wikipedia/commons/3/38/Blue_circle_with_white_highlight.svg"ImageLink3 = 'link 3'; step = 1;speed = 5;max = 3 transvalue=0; function animation()	{	document.images.slide.src=eval("Image"+step+".src")document.getElementById('slide_link').setAttribute("href", eval("ImageLink"+step));				trans(); //run transitional function			if(step<max)		{		step++		}	else		{		step=1		}	setTimeout("animation()",speed*500)	} function trans()	{	transvalue = transvalue+0.1;		if(transvalue>1)		{		transvalue=1;		} 	if('\v' == 'v') // find out if IE crap or not		{		document.images.slide.style.filter='alpha(opacity='+(transvalue*100)+')'; //run IE Crap		}	else		{		document.images.slide.style.opacity=transvalue; // else run code for other much better browsers		} 	if(transvalue>=1)		{		clearTimeout(t);		transvalue=0;		}	else		{		t=setTimeout(trans,50)		}	} window.onload=function()	{	animation();	} /*--*//*]]>*/ </script> </head> <body> <div class="Size"> <a id="slide_link" href="#"><img src="http://www.homeschoolarts.com/k6images/beach_scene/sun-red-circle.gif" name="slide" class="noborder" alt="" /></a><script type="text/javascript">trans();</script></div> </body></html>

dsonesuk · January 10, 2012

Just realised you have to change

document.getElementById('slide_link').setAttribute("href", "ImageLink"+step);

to

document.getElementById('slide_link').setAttribute("href", eval("ImageLink"+step));

regicidedelferoz · January 12, 2012

my code is working on IE9 and firefox 9.0.1

dsonesuk · January 12, 2012

The filter:blendTrans() works in IE7, 8, 10 not in IE9 (IE tester) for some reason, not really bothered why, couldn't care less, none show the last image just broken image icon, FF, Chrome, Opera, Safari don't show transition effect at all, but do show all images. withdocument.getElementById('slide_link').setAttribute("href", eval("ImageLink"+step));the links will show the actual link when used ie http://google.com instead of just text of variable ref 'ImageLink1', 'ImageLink2' or 'ImageLink3'

How Do I Add Href="" To This Code?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived