Help with incorporating link within an onmouseover image [Archive]

MartinKearns

05-23-2012, 08:41 AM

Greetings All;

New poster here and thank you in advance for any help or advice you might be able to give...

I'm currently trying to create a number of "on mouseover" images, with each image containing a hyperlink to a webpage. The images will be incorporated within a template, which is XHTML-Strict.

So far I've managed to create the "on mouseover" image effect just fine - using (what I think is called) "Flipit" JavaScript code; my difficulty now is in correctly incorporating a hyperlink *within* the code, so that not only will the image change "on mouseover" (the bit that I have managed to do) but the image will form a hyperlink too (which is beyond me, entirely).

Below is one "onmouseover" code sample, as is:

<div class='flipit'><a href='' onblur='try {parent.deselectBloggerImageGracefully();} catch(e) {}'><img alt='' border='0' src='http://lesvisible.net/LVDC/MENUBAR/Home.jpg' style='cursor:pointer; cursor:hand;'/></a><a href='' onblur='try {parent.deselectBloggerImageGracefully();} catch(e) {}' style='display:none'><img alt='' border='0' src='http://lesvisible.net/LVDC/MENUBAR/Home2.jpg' style='cursor:pointer; cursor:hand;'/></a></div>

Question is: where on earth, and how, might I then incorporate a hyperlink to a webpage within that soup?

Thank you again for any help you can offer!

Martin

vwphillips

05-23-2012, 12:20 PM

<!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" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<a href="URL1.htm" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="egypt" border="0"
onmouseover="this.src='http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg';this.parentNode.href='URL2.htm'; "
onmouseout="this.src='http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg';this.parentNode.href='URL1.htm'; "
/></a>
</body>

</html>

MartinKearns

05-23-2012, 01:39 PM

<!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" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<a href="URL1.htm" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="egypt" border="0"
onmouseover="this.src='http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg';this.parentNode.href='URL2.htm'; "
onmouseout="this.src='http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg';this.parentNode.href='URL1.htm'; "
/></a>
</body>

</html>
Mr Phillips, I doff my cap to your genius in both putting together that code, and the entirely unambigious manner in which you laid it out for me.

Thank you, sincerely. I'm now pledging a donation to http://www.operationsmile.org.uk/

You've made this a real pleasure.

Martin

ItsKBear

03-10-2013, 12:10 AM

<a href="URL1.htm" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="egypt" border="0"
onmouseover="this.src='http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg';this.parentNode.href='URL2.htm'; "
onmouseout="this.src='http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg';this.parentNode.href='URL1.htm'; "
/></a>

Could anyone clarify something for me re the above code?

The presence within the code of URL1 and URL2 suggests to me that a different target web page can be set for each of the two images. Is this practicable, never mind possible?

My own half-baked logic tells me that a mouse pointer is either hovering over an image, or it's not. If it IS hovering and it's over a clickable link then a click will send the browser TO that link. If it's NOT hovering over the image, then it's not hovering on a clickable object. I think? Can someone please put me right on that - because I can't for the life of me see why a distinction is being made within that code between URL1 and URL2 - thanks to anyone who can put me right on that!