...

View Full Version : onclick image hyperlinks



Martin310
08-18-2008, 03:52 PM
Im currently putting a website together adn ive come across a problem that im having difficulty solving.

I've got several images in my gallery page, using the javascript, and the onclick function, I have all images appearing in the center of the page when click.

I want to use the center image as a hyperlink, going to a different page depending on whick picture is there.

Im totally inexperienced at javascript, can anybody give me any suggestions?

Thanks
Martin

abduraooft
08-18-2008, 04:19 PM
Could you show us your current code?

Martin310
08-18-2008, 04:24 PM
<SCRIPT language="JavaScript">
<!--
if (document.images)
{
Elements_Color= new Image(177,118);
Elements_Color.src="Website_Files/Images/Web_product_images/Elements_Colour.jpg";

Drafting_Color= new Image(177,118);
Drafting_Color.src="Website_Files/Images/Web_product_images/Drafting_Colour.jpg";
}

function change1(picName,imgName)
{
if (document.images)
{
imgOn=eval(imgName + ".src");
document[picName].src= imgOn;
}
}
//-->
</script>
</head>
<body>

<img src="Website_Files/Images/Web_product_images/Drafting_B&W.jpg onclick="change1('MainImage','Drafting_Color')" >

<img src="Website_Files/Images/Web_product_images/Elements_B&W.jpg" onclick="change1('MainImage','Elements_Color')" >

<IMG SRC="Website_Files/Images/Web_product_images/KSC_Colour.jpg"
name="MainImage" width="177" height="118" border="0" valign="center" align="center" >

rangana
08-19-2008, 05:34 AM
Surround your centered image with <a> tag:


<a href="#">
<IMG SRC="Website_Files/Images/Web_product_images/KSC_Colour.jpg"
name="MainImage" width="177" height="118" border="0" valign="center" align="center">
</a>


Pass the url you want the image be linked to:


<img src="Website_Files/Images/Web_product_images/Drafting_B&W.jpg" onclick="change1('MainImage','Drafting_Color','http://www.google.com')" >

<img src="Website_Files/Images/Web_product_images/Elements_B&W.jpg" onclick="change1('MainImage','Elements_Color','http://www.codingforums.com')" >


And modify change1 function into:


function change1(picName,imgName,uri)
{
if (document.images)
{
imgOn=eval(imgName + ".src");
document[picName].src= imgOn;
document[picName].parentNode.setAttribute('href',uri);
}
}



P.S. You have a lot of deprecated attributes, have sometime to make it valid (http://www.codehelp.co.uk/html/deprecated.html).

You might also want to make use of document.getElementById (http://developer.mozilla.org/en/docs/DOM:document.getElementById) in replacement of document[picName].

Hope that helps.

Martin310
08-19-2008, 05:23 PM
Thanks so much for that, it works perfectly.
I was along the right lines when i was trying to sort it, but i missed a few key lines out haha, nevermind.

Thanks again
Martin



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum