Mouse Over?

mehfesto2

Hello people.

Quick question. Does anyone know how to make this:


Become this:
,

when I hover my mouse over it? I don't even know what this process is even called, so if someone knows I could even google it myself. It's just for my wee webpage for college. Think it'd be well fancy and get me all the extra marks going!

I'm using frontpage, but have a basic knowledge of coding so if anyone wants to just give me the code instead of explain the process even, that'd be great!

Thanks

John_Mc

mehfesto2 wrote: »

Hello people.

Quick question. Does anyone know how to make this:


Become this:
,

when I hover my mouse over it? I don't even know what this process is even called, so if someone knows I could even google it myself. It's just for my wee webpage for college. Think it'd be well fancy and get me all the extra marks going!

I'm using frontpage, but have a basic knowledge of coding so if anyone wants to just give me the code instead of explain the process even, that'd be great!

Thanks

You can do this using CSS hyperlink styles like:

.ImageLink a
{
background-image: url(ImagePath.gif);
}

.ImageLink a:hover
{
background-image: url(OverImagePath.gif);
}

Where ImageLink is the container of the the hyperlinks.

You could also use javascript

Ice_Box

javascript onmouseover event

http://www.w3schools.com/jsref/jsref_onmouseover.asp

egan007

People will suggest 2 ways on this thread.
1. The right way (Css)
2. The wront way (on role over Javascript event)

Here is the right way.
http://www.findmotive.com/2006/10/31/simple-css-image-rollover/

Bascially you put both of the images above into one image and the css displays only part of it (it initally shows the man part of the image, on role over it shows the 'portraits' part of the image)

Stick to the CSS way.

P.s. From a usability point of view, if this is a button it should say portraits first, don't hide pages from people. Designers love Subtlety but it can kill usability if mis used.

p

Using Javascript isn't "the wrong way", as CSS will only work if it's a link.

As long as you use unobtrsive javascript, then it's a perfectly good solution.
http://www.leihitu.nl/xperiments/rollover/

To the original poster, the term rollover is generally used to refer to things like this on the web, though mouseover is also an understandable term.

John_Mc

p wrote: »

Using Javascript isn't "the wrong way", as CSS will only work if it's a link.

As long as you use unobtrsive javascript, then it's a perfectly good solution.
http://www.leihitu.nl/xperiments/rollover/

To the original poster, the term rollover is generally used to refer to things like this on the web, though mouseover is also an understandable term.

There is a risk that the end user will have javascript disabled though, so in this scenario CSS would probably be best.

mewso

John_Mc wrote: »

There is a risk that the end user will have javascript disabled though, so in this scenario CSS would probably be best.

Yeah css is the best way here but I'm still in shock that someone other than me mentioned unobtrusive javascript here. Good sign I hope.

mehfesto2

Thanks to everyone for their help.
I got it working using a long html code in the end.

I'll post the results when I'm allowed (my current college web-space is being taken up by my current one page website and lots of other online assesments that still have to be graded.) It's looking great though! Cheers again!

conordarcy

CSS:
a#portraits{
background:url(my-image.jpg);
width:240px;
height:160px;
display:block;
line-height:999px;
overflow:hidden;
}

a:hover#portraits{
background:url(my-image.jpg) bottom;
}

HTML:
<a id="portraits" title="portraits" href="#">Portraits</a>

Image:
http://conordarcy.com/website-design/my-image.jpg

Final Sample:
http://conordarcy.com/website-design/css-rollover.html