Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Aug 2011
    Posts
    192
    Thanks
    112
    Thanked 0 Times in 0 Posts

    Swap multiple images on "hover over TEXT"

    Hello,
    I am trying to do an image swap when hovering over "TEXT" links.
    For instance, I would like to first have a "mainpic" in a div that would be replaced by either image 1,2 or 3 (depending on if you are hovering over"text link 1,2 or 3).

    I would use normal rollover "image" swaps, but would prefer to have the "trigger" to be "text" (for SEO reasons).

    I am just getting familiar with javascript, but do not even know where to begin!
    I have read multiple forum entries throught google, but could not find any where I could have "multiple" text links.

    I would so much appreciate it if anyone could please point me in a direction. Sincerely, Buffmin

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,146
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Try this:-

    Code:
    <img id = "myImage" src = "default.jpg">
    <br><br>
    
    <a href = javascript:void(0); onmouseover = "document.getElementById('myImage').src = 'One.jpg' ">Link one</a> &nbsp &nbsp
    
    <a href =  javascript:void(0); onmouseover = "document.getElementById('myImage').src = 'Two.jpg' ">Link two</a> &nbsp &nbsp
    
    <a href =  javascript:void(0);  onmouseover = "document.getElementById('myImage').src = 'Three.jpg' ">Link three</a>
    You can add onmouseout if you wish to revert to the default.


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    Buffmin (03-01-2012)

  • #3
    Regular Coder
    Join Date
    Aug 2011
    Posts
    192
    Thanks
    112
    Thanked 0 Times in 0 Posts
    Thank you Philip.
    Looking easy. Now I assume I have to add some type of getelementById script code in the head section? Sorry, I am new to javascript.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,146
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Quote Originally Posted by Buffmin View Post
    Thank you Philip.
    Looking easy. Now I assume I have to add some type of getelementById script code in the head section? Sorry, I am new to javascript.
    No. Why? The code is complete.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    Buffmin (03-01-2012)

  • #5
    Regular Coder
    Join Date
    Aug 2011
    Posts
    192
    Thanks
    112
    Thanked 0 Times in 0 Posts
    Philip,
    You are correct! Thank you very much! Buffmin


  •  

    Posting Permissions

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