Mouse Hovers, Screen Changes

I saw a site recently where a sample page format was
sitting to the right of a list of format names.  As I moved
my mouse down the list of names, the sample format in
the page-box changed to demonstrate what that page
style would look like.  I never clicked, just hovered over
links that altered a picture on the page according to what
link I was hovering over.  I didn't view source and now
I can't find that site.  

What was that?  How did they do that?
medunitAsked:
Who is Participating?
 
MFKConnect With a Mentor Commented:
You use the  " Hover" pseudo class. No scripting or java required.
Sets the style of the anchor when the user's mouse hovers over the links.

Syntax

HTML [A]:hover { attribute1:parameter1 [; attribute2:parameter2 [; . . .]] }

Possible Values

attribute: Any attribute applicable to text.
parameter: Any of the range of values available to the corresponding attribute.

The default value is browser-specific.

Remarks

"Hover" means that the user has the mouse positioned over the link and has hesitated. The style will not change if the mouse is simply passed over the link. Setting the hover pseudo-class is often used in conjunction with setting specific styles for the other states of a link: active, link, and visited.

Using pseudo-classes on objects other than the A object has no effect.

Note the syntax in the example below uses a colon (:) to specify a pseudo-class.

Example

When a user hovers over a hyperlink contained within a document to which the following style sheet has been applied, the text is displayed in red, converted to uppercase, and spaced 1 centimeter apart.

Sample Code

<STYLE>
    A:hover { color:red; text-transform:uppercase; letter-spacing:1cm }
</STYLE>
Applies To

You can do the same for the following pseudo classes:

   active, link, visited



0
 
MasseyMCommented:
Couple of ways:

If it was with images, it is the same as "hover-buttons"... Using javascript you can "onMouseOver" change the graphic.

Or if it was text and an actual page, they could have used layers."onMouseOver" show this layer...

If you want code, I can look for ya.
0
 
medunitAuthor Commented:
MasseyM, for 50 pts, don't go digging up code.  You answered the question.  Lock the points.  They're yours.  Thank you.
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
MasseyMCommented:
medunit... Thanks, but I guess MFK answered it before I could get back to answer it myself...

I will answer if you declien the answer.
0
 
nathanlisgoCommented:
The solution is in basic javascript

<html>
<head>
<title>image changes on Mouse Over</title>
</head>
<body>
<p><a href="#" onMouseOver="document.color.src='image1.jpg';">image1</a>
<a href="#"
onMouseOver="document.color.src='image2.jpg';">image2</a>
<a href="#"
onMouseOver="document.color.src='image3.jpg';">image3</a>
<a href="#"
onMouseOver="document.color.src='image4.jpg';">image4</a>
</p>
<p><img src="image.jpg" name="image"></p>
</body>
</html>

Copy and paste the html above and replace the .jpg with .jpg files of your own. You could even add onMouseOut features to the links so that changes when the mouse cursor moves off the link document.image.src='image.jpg';
the picture returns to the original image.
0
 
MasseyMCommented:
I will answer if you decline the nswer above.
0
 
nathanlisgoCommented:
SORRY MY PREVIOUS ANSWER WAS NOT FULLY CORRECT.

The solution is in basic javascript

<html>
<head>
<title>image changes on Mouse Over</title>
</head>
<body>
<p><a href="#" onMouseOver="document.image.src='image1.jpg';">image1</a>
<a href="#"
onMouseOver="document.image.src='image2.jpg';">image2</a>
<a href="#"
onMouseOver="document.image.src='image3.jpg';">image3</a>
<a href="#"
onMouseOver="document.image.src='image4.jpg';">image4</a>
</p>
<p><img src="image.jpg" name="image"></p>
</body>
</html>

Copy and paste the html above and replace the .jpg with .jpg files of your own. You could even add onMouseOut features to the links so that changes when the mouse cursor moves off the link document.image.src='image.jpg';
the picture returns to the original image.

0
 
nathanlisgoCommented:
SORRY MY PREVIOUS ANSWER WAS NOT FULLY CORRECT.

The solution is in basic javascript

<html>
<head>
<title>image changes on Mouse Over</title>
</head>
<body>
<p><a href="#" onMouseOver="document.image.src='image1.jpg';">image1</a>
<a href="#"
onMouseOver="document.image.src='image2.jpg';">image2</a>
<a href="#"
onMouseOver="document.image.src='image3.jpg';">image3</a>
<a href="#"
onMouseOver="document.image.src='image4.jpg';">image4</a>
</p>
<p><img src="image.jpg" name="image"></p>
</body>
</html>

Copy and paste the html above and replace the .jpg with .jpg files of your own. You could even add onMouseOut features to the links so that changes when the mouse cursor moves off the link document.image.src='image.jpg';
the picture returns to the original image.

0
 
medunitAuthor Commented:
All these answers seem useful.  Haven't had time to check any of them out.  Going to give MFK the points and create two more questions for masseym and nathanlisgo.
0
 
MasseyMCommented:
Thanks MedUnit
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.