Mouse over image changy thing.
Moderator: General Moderators
- daedalus__
- DevNet Resident
- Posts: 1925
- Joined: Thu Feb 09, 2006 4:52 pm
Mouse over image changy thing.
My work wants me to make something similar to this, http://www.harley-davidson.com/wcm/Cont ... cale=en_US, to show which branches are for what part of the United States.
I don't know JavaScript (EDIT: I don't know any client side language well enough to do this on my own). This doesn't seem like it is the most difficult task but I really have no idea where to begin. Is JavaScript the best solution? How should this be designed and implemented?
I don't know JavaScript (EDIT: I don't know any client side language well enough to do this on my own). This doesn't seem like it is the most difficult task but I really have no idea where to begin. Is JavaScript the best solution? How should this be designed and implemented?
- MrPotatoes
- Forum Regular
- Posts: 617
- Joined: Wed May 24, 2006 6:42 am
i'm pretty sure you can do that with CSS and it'll load it all as the page loads. w/js it'll load the rollover as you rollover not with the page. so personally that's what i would do
i haven't done this personally because i don't do clientside anything and secondly if i did i would do it on dreamweaver (*ashamed*) but this is my take on it. someone else can clear it up for ya...
1. on rollover change the link colour or select a different image
2. on rollover select a different image on the map
for the second area i think you can do a map, i dunno how to do this in html tho, so it would be faster. here are some links i just found too
http://www.designmeme.com/articles/cssrollovers/
http://www.tutorio.com/tutorial/pure-cs ... -rollovers
the second is more useful
i haven't done this personally because i don't do clientside anything and secondly if i did i would do it on dreamweaver (*ashamed*) but this is my take on it. someone else can clear it up for ya...
1. on rollover change the link colour or select a different image
2. on rollover select a different image on the map
for the second area i think you can do a map, i dunno how to do this in html tho, so it would be faster. here are some links i just found too
http://www.designmeme.com/articles/cssrollovers/
http://www.tutorio.com/tutorial/pure-cs ... -rollovers
the second is more useful
- daedalus__
- DevNet Resident
- Posts: 1925
- Joined: Thu Feb 09, 2006 4:52 pm
I don't think that this is what you need, but this article is very good and it's related to what you need, so here it is: http://www.alistapart.com/articles/cssmaps/
Edit: Read these:
http://www.alistapart.com/articles/slidingdoors2/
http://www.w3schools.com/css/pr_text_text-indent.asp
If you read these, you should have enough knowledge to do what you need
Edit: Read these:
http://www.alistapart.com/articles/slidingdoors2/
http://www.w3schools.com/css/pr_text_text-indent.asp
If you read these, you should have enough knowledge to do what you need
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
Re: Mouse over image changy thing.
A quick look at the source of the page shows how they did that. Can you copy it, play around with it and implement something similar in your own page?Daedalus- wrote:My work wants me to make something similar to this, http://www.harley-davidson.com/wcm/Cont ... cale=en_US, to show which branches are for what part of the United States.
- daedalus__
- DevNet Resident
- Posts: 1925
- Joined: Thu Feb 09, 2006 4:52 pm
- daedalus__
- DevNet Resident
- Posts: 1925
- Joined: Thu Feb 09, 2006 4:52 pm
Would I be spanked if I did something like this?
the fact is, i just dont care about their website. its the only reason i would do it so ugly. i would like to hear anyone elses idea.
Code: Select all
<style>
div@northeast a div
{
background-image: url('off.gif');
position: absolute for easiness;
}
div@northeast a:hover div
{
background-image: url('on.gif');
}
div#northeast a:hover div
{
display: none;
}
div#northeast a:hover div div
{
display: block;
position: relative;
top: 5em; to keep it off the map
}
</style>
<div id="northeast">
<a href="northeast">
state 1<br />
state 2<br />
state 3<br />
state 4<br />
state 5<br />
<div><div>short text about branch contact information, i decided to put it in here so the div gets rendered</div></div>
</div>- daedalus__
- DevNet Resident
- Posts: 1925
- Joined: Thu Feb 09, 2006 4:52 pm
- MrPotatoes
- Forum Regular
- Posts: 617
- Joined: Wed May 24, 2006 6:42 am
then do it like today 
if you don't care too bad i would just go ahead and do it the way that you planned. but i personally would do it in CSS because i think it's faster. but that's just my two cents
also, like i said, i'm not good with clientside (visual/audio) because i'm a programmer no matter how frustrated i become with it lmao!
if you don't care too bad i would just go ahead and do it the way that you planned. but i personally would do it in CSS because i think it's faster. but that's just my two cents
also, like i said, i'm not good with clientside (visual/audio) because i'm a programmer no matter how frustrated i become with it lmao!
Check this out:
http://www.alistapart.com/articles/sprites/
http://www.alistapart.com/articles/sprites/
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
That is one kick butt example. I think I am going to try that on a site really soon. I think this same principal can be applied to something like the Harley site, but it would take a good understanding of image maps and coordinates to get it to work right. And it should load faster than Javascript as well.
Very nice tutorial. Maybe that one can go in a 'Useful Resources' thread around here?
Very nice tutorial. Maybe that one can go in a 'Useful Resources' thread around here?
- daedalus__
- DevNet Resident
- Posts: 1925
- Joined: Thu Feb 09, 2006 4:52 pm
- MrPotatoes
- Forum Regular
- Posts: 617
- Joined: Wed May 24, 2006 6:42 am
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
The article is taking several images (2 of each to be exact) and placing one image as the background of an HTML element. The :hover pseudo element is then given a different backgound image so when you mouse over the original, the 'new' background shows up. Use the Button example in that tutorial and it will demonstrate it pretty well. In fact, here is the HTML from that tutorial.
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Sprites: Image Slicing's Kiss of Death</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style media="screen">
#iconmenu {position: relative; margin: 10px auto; padding: 3px; width: 206px; height: 52px; background: url(pattern.gif);}
#iconmenu li {width: 50px; height: 50px; position: absolute; top: 2px; background: url(icons.gif) 0 0 no-repeat; display: block; list-style: none;}
#iconmenu a {width: 50px; height: 50px; display: block; border: solid 1px #fff;}
#iconmenu a:hover {border: solid 1px #000;}
#iconmenu #panel1c {left: 2px;}
#iconmenu #panel2c {left: 54px; background-position: -51px 0;}
#iconmenu #panel3c {left: 106px; background-position: -102px 0;}
#iconmenu #panel4c {left: 158px; background-position: -153px 0;}
#iconmenu #panel1c a:hover {background: url(icons.gif) -1px -52px no-repeat;}
#iconmenu #panel2c a:hover {background: url(icons.gif) -52px -52px no-repeat;}
#iconmenu #panel3c a:hover {background: url(icons.gif) -103px -52px no-repeat;}
#iconmenu #panel4c a:hover {background: url(icons.gif) -154px -52px no-repeat;}
</style>
</head>
<body>
<ul id="iconmenu">
<li id="panel1c"><a href="#"></a></li>
<li id="panel2c"><a href="#"></a></li>
<li id="panel3c"><a href="#"></a></li>
<li id="panel4c"><a href="#"></a></li>
</ul>
</body>
</html>