Mouse over image changy thing.

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Mouse over image changy thing.

Post 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?
User avatar
MrPotatoes
Forum Regular
Posts: 617
Joined: Wed May 24, 2006 6:42 am

Post 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
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Post by daedalus__ »

Jeebus.

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

Thanks !!!
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post 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:
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Re: Mouse over image changy thing.

Post 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?
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Post by daedalus__ »

I can't because I am sure that even with Javascript that there is a better and cleaner way to do that.
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post 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:
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Post 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.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Post by daedalus__ »

okay, so no thoughts on this?

this has to be done like.. friday
User avatar
MrPotatoes
Forum Regular
Posts: 617
Joined: Wed May 24, 2006 6:42 am

Post 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!
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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?
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Post 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.
User avatar
MrPotatoes
Forum Regular
Posts: 617
Joined: Wed May 24, 2006 6:42 am

Post 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
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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>
Post Reply