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 6 of 6
  1. #1
    Junior Member
    Join Date
    Aug 2003
    Posts
    2
    Member #
    2443
    Hi There,

    I'm trying to create a rollover image that is activated when the mouse moves over highlighted text within a paragraph.

    For instance, when the word, "example" is moused-over, part of an unrelated image gets swapped, in order to highlight the example.

    Any suggestions?

    T

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2003
    Location
    Australia
    Posts
    735
    Member #
    1935
    here you go

    javascript code:
    Code:
    function changePic(imagename,newsrc){
    	var newpic="images/" + newsrc;
    document.images[imagename].src = newpic;
    }
    function returnPic(imagename,oldsrc){
         var oldpic="images/" + oldsrc;
      document.images[imagename].src = oldpic;
    }
    code to call the function:
    Code:
    <div name="example" onmouseout="returnPic('example','example.gif')"
     onmouseover="changePic('example','menu_example_over.gif')">
     example:</div>
    that should work..

  4. #3
    Senior Member
    Join Date
    Jun 2003
    Location
    Australia
    Posts
    735
    Member #
    1935
    this example assumes that you store your images in a 'images' sub-directory. If you dont then just remove the following line from the jscript function
    var newpic="images/" + newsrc;
    and then replace 'newpic' with 'newsrc' in the line below.

    and make sure that you change the image names to suit you.

    p.s you could also do it with <a> links. Just change the div tag to a <a> tag.
    <a name="example" href="ddd.html" onmouseover=""> ect, ect...

  5. #4
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Hmm... expanding on the example:
    Code:
    <html>
        <head>
            <script language="javascript">
            var imageName = "swapImage";
            var oldSrc = null;
            function imgOver(newSrc) {
                oldSrc = document.images[imageName].src;
                document.images[imageName].src = newSrc;
            }
            function imgOut() {
                document.images[imageName].src = oldSrc;
                oldSrc = null;
            }
            </script>
        </head>
        <body>
            <p>
                Roll over a link to swap image:
                <a href="#" onmouseover="imgOver('image1.gif')" onmouseout="imgOut()">One</a> |
                <a href="#" onmouseover="imgOver('image2.gif')" onmouseout="imgOut()">Two</a>
            </p>
            <img name="swapImage" src="image.gif" width="100" height="100">
        </body>
    </html>
    And here's the example with images all zipped up for ya

  6. #5
    Junior Member
    Join Date
    Aug 2003
    Posts
    2
    Member #
    2443
    Wow!

    Hey thanks!

    Very thorough! I stumbled across the <a> tag use after realizing that the <div> would act like a <p> tag and create line breaks.

    It worked great for what I was attempting to do.

    Thanks again.
    T

  7. #6
    Senior Member
    Join Date
    Jun 2003
    Location
    Australia
    Posts
    735
    Member #
    1935
    no problem.


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 09:06 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com