SitePoint Sponsor |
|
User Tag List
Results 1 to 2 of 2
Thread: Disjointed rollover
-
Mar 17, 2007, 14:10 #1
- Join Date
- Apr 2003
- Location
- New york
- Posts
- 39
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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!
-
Mar 18, 2007, 02:34 #2
- 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