www.webdeveloper.com
Results 1 to 5 of 5

Thread: HTML Link hover changing image somewhere else

  1. #1
    Join Date
    Jun 2011
    Posts
    4

    Question HTML Link hover changing image somewhere else

    I've been trying to make a html link <a> change an image right below the link. I need to do this for about 5 links (Navigation menu) and all the code I seem to stumble on and try does not work.

    I have found the below code that works however it's setup to only replace ONE image. How can I set this up to accommodate about 4 more?

    Javascript to make it all work
    Code:
    <script>
    function changeimage(towhat,url){
    if (document.images){
    document.images.targetimage.src=towhat.src
    gotolink=url
    }
    }
    function warp(){
    window.location=gotolink
    }
    
    </script>
    <script language="JavaScript1.1">
    var myimages=new Array()
    var gotolink="#"
    
    function preloadimages(){
    for (i=0;i<preloadimages.arguments.length;i++){
    myimages[i]=new Image()
    myimages[i].src=preloadimages.arguments[i]
    }
    }
    
    
    preloadimages("images/Header_Hover_23.png","images/Header_23.png")
    </script>
    Link For Nav Menu
    Code:
    <a href="#" onMouseover="changeimage(myimages[0],this.href)" onMouseout="changeimage(myimages[1],this.href)">Work</a>
    Image Code
    Code:
    <a href="javascript:warp()"><img src="images/Header_23.png" name="targetimage" border=0></a>

  2. #2
    Join Date
    Jun 2011
    Posts
    4

    Unhappy

    Can anyone point me in the right direction?

  3. #3
    Join Date
    Jun 2011
    Posts
    4
    Quote Originally Posted by kjarahz View Post
    Can anyone point me in the right direction?

  4. #4
    Join Date
    Oct 2007
    Location
    Western Massachusetts, USA
    Posts
    387
    This will change the img element's src attribute whose id is "id" to "src":
    PHP Code:
    function change_nav_image(idsrc) {
      if (
    document.getElementById(id)) {
      
    document.getElementById(id).src src;
      }

    This is really quite simple, but what you are looking to do could probably be done just with background images in CSS.
    Computer programmer / web developer.

  5. #5
    Join Date
    Jun 2011
    Posts
    4
    Sorry to not know what to do with it but how do I utilize this code snippet?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles