Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member Scottykav's Avatar
    Join Date
    Apr 2005
    Posts
    18
    Member #
    9621
    Hey,

    I am trying to make a navagation when you roll over text, an image somewhere else changes to another image, but i dont know how to do this. My friend said i could use CSS to code it but i hav no clue at all. The site i want to do it on is: http://www.wholesalemeat.tk and if you see where the links are and where the image is then could anyone please help me to make the image change to another picture when you roll over one of the links.

    Thanks,
    Scottykav

  2.  

  3. #2
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    1: give your image tag an id..
    Code:
    <img src="new-ball.gif" width="141" height="141" id="change" />
    2: Give the text that triggers the change a onMouseOver event..
    Code:
    <p onMouseOver="changeImage();">this is the text that onMouseOvered changes the image</p>
    3: Create the JavaScript function changeImage();
    Code:
    <script type="text/javascript">
    function changeImage() {
    
      document.getElementById("change").src = 'disco.gif';
    
    }
    </script>
    See attached files
    Hope this helps
    Attached Images Attached Images

  4. #3
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    You can do it in CSS fairly easily, but making it work in IE will require some Javascript. If the above isn't what you want and you want the CSS version, let me know, I can post it.

  5. #4
    Junior Member Scottykav's Avatar
    Join Date
    Apr 2005
    Posts
    18
    Member #
    9621
    Thanks that helps a little but i would like it to happen for each link to go to a different image each time so Shadowfiend or anyone please tell me the CSS way of doing it.

    Thanks

  6. #5
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Oh... Reading with a little more detail what you want to do, I actually think that may only be possible using Javascript. In this case, you can modify bfsog's example slightly.

    First of all, change changeImage() a little:
    HTML Code:
    <script type="text/javascript">
    function changeImage( newImg )
    {
        document.getElementById("change").src = newImg;
    }
    </script>
    Then, change any uses of it later on:
    HTML Code:
    <p onmouseover="changeImage( 'image1.png' );">First link</p>
    <p onmouseover="changeImage( 'image2.png' );">Second link</p>
    ...
    Note how changeImage() is being changed to changeImage( 'imageUri' ) -- this is where you specify a different image for each link.

    Disclaimer: Any changes in coding style are because I have my own coding style; you're free to use your own. It's the actual code changes that matter.

  7. #6
    Junior Member Scottykav's Avatar
    Join Date
    Apr 2005
    Posts
    18
    Member #
    9621
    Ok thanks but if you look at the site now http://www.wholesalemeat.tk it only rollsover one image for each link and i want each link to have its own individual image and also i want it so on mouse off the image returns to the original. If you could help me more please do.

    Thanks

  8. #7
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Quote Originally Posted by Scottykav
    Ok thanks but if you look at the site now http://www.wholesalemeat.tk it only rollsover one image for each link
    Huh? With the revised code yes, it takes the argument you give it and changes the image to that argument..

    Quote Originally Posted by Scottykav
    and i want each link to have its own individual image and also i want it so on mouse off the image returns to the original. If you could help me more please do.
    Thanks
    Well for each link to have its own image (by this I think you mean each link has a image all to itself to change) you would just code x <img> tags.

    And to make it return to the old image, you will use the onMouseOut event.

    Code:
    function ChangeImageBack(oldImg) {
    
    document.getElementById("change").src = oldImg;
    }
    And to call that..
    Code:
    <p onmouseover="changeImage( 'image1.png' );" onMouseOut="changeImageBack('oldimage.png')">First link</p>
    Tip: you may want to give your function 2 arguments, 1 being the id of the element you want to change, and the other being the URL to swap it to.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:20 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com