SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    New york
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Disjointed rollover

    Help!

    My site has a map of New York City, next to a list of text-links to the various neighborhoods in the city: Chelsea, Greenwich Village, Midtown, Downtown, etc.

    Right now, when you hover over the text links, the background and border for each div changes - which is good. I can do that with CSS and anhover etc.

    However, I want another thing to happen when the cursor hovers over each text link: I want the image of the neighborhood to change color on the map.

    So for example if your cursor hovers over the "Downtown" link, I want the section of the map that is Downtown to change colors into something brighter (and of course the text link's own border/background itself should also change colors as usual too.)

    In other words, I guess, when the cursor hovers the text link, the original map image is swapped for another map image in which the Downtown neighborhood is indicated by a different color.

    I guess this is called a disjointed rollover but after reading about it on various sites on the web, I can't find a simple straightforward script. I code by hand and not Dreamweaver.

    I think this can be done in pure CSS but not easily so I am just asking for Javascript for now.

    Can anyone point me the right direction?

    This is my existing CSS to change the background/border/color of the text links:


    #list-menu a {
    display: block;
    width: 160px;
    padding: 2px 2px 2px 3px;
    border: 1px solid gray;
    background: #96A377;
    text-decoration: none;
    text-align: left;}

    #list-menu a:link, #list-menu a:active, #list-menu
    a:visited {
    color: #404040;
    }

    #list-menu a:hover {
    border: 1px solid #7CB159;
    background: #55613B;
    color:#FAF49A;
    border-left: 10px solid #9AC683;
    }


    and this is the html:


    <div id="list-menu">
    <ul>
    <li><a href="#">Lower East Side</a></li>
    <li><a href="#">Greenwich Village</a></li>
    <li><a href="#">Midtown</a></li>
    <li><a href="#">Murray Hill</a></li>
    <li><a href="#">Chelsea</a></li>
    <li><a href="#">Upper East Side</a></li>
    </ul>
    </div>

    Thanks!

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try:
    Code:
    window.onload=
    {
         var mapImage = document.getElementById("mapImageID");
    
         var midtownLink = document.getElementById("midtownLinkID");
         midtownLink.onmouseover = function()
         {
              mapImage.src = "midtownHighlighted.jpg"
         }
    }


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
  •