• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 190
  • Last Modified:

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?
0
medunit
Asked:
medunit
  • 4
  • 3
  • 2
  • +1
1 Solution
 
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
 
MFKCommented:
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 4
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now