Page 1 of 2

Mouse over image changy thing.

Posted: Wed Jul 12, 2006 4:59 am
by daedalus__
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?

Posted: Wed Jul 12, 2006 8:32 am
by MrPotatoes
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

Posted: Wed Jul 12, 2006 11:13 am
by daedalus__
Jeebus.

After I read your message I totally realised how to do this with pure CSS.

Thanks !!!

Posted: Wed Jul 12, 2006 11:17 am
by Oren
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 :wink:

Re: Mouse over image changy thing.

Posted: Wed Jul 12, 2006 11:33 am
by RobertGonzalez
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.
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?

Posted: Wed Jul 12, 2006 11:58 am
by daedalus__
I can't because I am sure that even with Javascript that there is a better and cleaner way to do that.

Posted: Wed Jul 12, 2006 12:01 pm
by Oren
Daedalus- wrote:I can't because I am sure that even with Javascript that there is a better and cleaner way to do that.
There is: Not to use JavaScript at all - Use CSS instead :wink:

Posted: Wed Jul 12, 2006 12:42 pm
by daedalus__
Would I be spanked if I did something like this?

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>
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.

Posted: Wed Jul 12, 2006 1:10 pm
by daedalus__
okay, so no thoughts on this?

this has to be done like.. friday

Posted: Wed Jul 12, 2006 1:35 pm
by MrPotatoes
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!

Posted: Wed Jul 12, 2006 1:42 pm
by Luke

Posted: Wed Jul 12, 2006 3:07 pm
by RobertGonzalez
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?

Posted: Wed Jul 12, 2006 3:34 pm
by daedalus__
I've got it working fine in FireFox.

It is totally broken in IE. :(

I didn't really understand that tutorial but I suppose I will re-read it.

Posted: Wed Jul 12, 2006 3:54 pm
by MrPotatoes
i didn't read the article other than that titles and i can sum up that it's imageslicing like that map in the harley davidson image map. it's more work than it's worth if you don't care about the website

Posted: Wed Jul 12, 2006 4:07 pm
by RobertGonzalez
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>