Results 1 to 2 of 2

Thread: Is there a DHTML script that will do this?

  1. #1
    Join Date
    Apr 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Is there a DHTML script that will do this?

    What I need is a standard menu with mouseover effect, but in addition to the mouse over effect on the menu, it also needs to change an image in a map I have on the page. There will be a list of roads on one side and a map on the other, so when the user mouses over the street, it will highlight, and also highlight the street on the map (by changing the image to one with that street highlighted). Sorry if this is a basic question, but I have searched all the scripts and don't see one that can do this. Thanks!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    For a menu item:
    HTML Code:
    <span onmouseOver="this.style.background='yellow';mapImg.src='elm_highlight.jpg'" onmouseOut="this.style.background='white'">Elm Street</span>
    and for the map:

    HTML Code:
    <img src="default_map.jpg" name="mapImg">
    How you lay these out on your page is up to you, as is the highlight color (here yellow) and color of the unhighlighted text's background (here white). If, instead of a background color highlight, you want the foreground color of the text to change, substitute 'color' for 'background' in the above. If you want 'Elm Street' (the text) to remain highlighted until a different street is selected, skip the onmouseOut statement.

    Also, for practical reasons which should become clear when you actually try this out, you might prefer to have the image change onClick rather than onmouseOver. Like this:

    HTML Code:
    <span>Click below to select Highlighted Map</span><br>
    <span onmouseOver="this.style.background='yellow'" onClick="mapImg.src='elm_highlight.jpg'" onmouseOut="this.style.background='white'">Elm Street</span>
    - John
    ________________________

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

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
  •