Results 1 to 6 of 6

Thread: Mouse over text to image

  1. #1
    Join Date
    Jan 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Mouse over text to image

    I am using Front Page 2003. I want to mouse over some text and have it bring up an image. Any help is greatly appreciated!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Installing scripts using FP can be tricky, but it's not impossible. What kind of action are you looking for?

    Like a gallery? (triggers can be text or images):

    http://www.dynamicdrive.com/dynamici...thumbnail2.htm

    Or like a tooltip? (descriptions are optional):

    http://www.dynamicdrive.com/dynamici...agetooltip.htm
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    As best as I can tell John, he is looking for something more simple in nature:
    http://jsfiddle.net/bernie1227/8zuvy/
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Doesn't work. I think you chose the wrong library. If I switch it from MooTools to jQuery, it does work. But for something simple, no library should be required. Something like:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    #myimage {
    	visibility: hidden;
    	display: block;
    }
    </style>
    </head>
    <body>
    <span id="trigger">Text</span>
    <img id="myimage" src="earth.jpg" alt="original image" title="">
    <script type="text/javascript">
    document.getElementById('trigger').onmouseover = function(){
    	document.getElementById('myimage').style.visibility = 'visible';
    }
    document.getElementById('trigger').onmouseout = function(){
    	document.getElementById('myimage').style.visibility = 'hidden';
    };
    </script>
    </body>
    </html>
    Demo:

    http://home.comcast.net/~jscheuer1/s...mouseimage.htm

    But one of the two scripts I mentioned here:

    http://www.dynamicdrive.com/forums/s...597#post289597

    might still be a better fit. It all depends upon what they ultimately want to do.

    Oh, and Bernie - Thanks for your contribution so far to this thread. But please don't turn this into a discussion about possibilities or comments on my code or your code or my comments on your code. Basically Please wait until the OP responds.
    Last edited by jscheuer1; 01-20-2013 at 04:26 AM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jan 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I found that tooltip a day after I posted this topic but I can not for the life of me get it to work.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    What seems to be the problem? Could you put up a live demo? I mean it obviously doesn't have to work, just do your best in following the instructions and upload the result to the web and give us a link to it. I'm sure we can advise you on how to get it working.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Image shown when mouse over text
    By Vaonline in forum Looking for such a script or service
    Replies: 3
    Last Post: 04-12-2012, 11:51 PM
  2. changing image and text on mouse using JS
    By emanuelle in forum JavaScript
    Replies: 3
    Last Post: 10-14-2010, 03:36 PM
  3. mouse over html text to swap image
    By neilkw in forum JavaScript
    Replies: 9
    Last Post: 09-12-2006, 11:28 PM
  4. Mouse over text, image appears
    By snowangel in forum Graphics
    Replies: 2
    Last Post: 02-07-2006, 06:00 PM
  5. Replies: 1
    Last Post: 07-30-2005, 11:19 AM

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
  •