Results 1 to 4 of 4

Thread: Help with incorporating link within an onmouseover image

  1. #1
    Join Date
    May 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Help with incorporating link within an onmouseover image

    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:


    Code:
    <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

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,793
    Thanks
    2
    Thanked 418 Times in 412 Posts

    Default

    Code:
    <!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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    MartinKearns (05-23-2012)

  4. #3
    Join Date
    May 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by vwphillips View Post
    Code:
    <!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
    Last edited by MartinKearns; 05-23-2012 at 01:39 PM. Reason: Grammar

  5. #4
    Join Date
    Mar 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Code:
    <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!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •