?
Solved

Mouse Hovers, Screen Changes

Posted on 1998-11-10
10
Medium Priority
?
185 Views
Last Modified: 2013-12-25
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
Comment
Question by:medunit
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
  • +1
10 Comments
 
LVL 10

Expert Comment

by:MasseyM
ID: 1856277
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
 

Author Comment

by:medunit
ID: 1856278
MasseyM, for 50 pts, don't go digging up code.  You answered the question.  Lock the points.  They're yours.  Thank you.
0
 
LVL 4

Accepted Solution

by:
MFK earned 200 total points
ID: 1856279
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!

 
LVL 10

Expert Comment

by:MasseyM
ID: 1856280
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
 

Expert Comment

by:nathanlisgo
ID: 1856281
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
 
LVL 10

Expert Comment

by:MasseyM
ID: 1856282
I will answer if you decline the nswer above.
0
 

Expert Comment

by:nathanlisgo
ID: 1856283
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
 

Expert Comment

by:nathanlisgo
ID: 1856284
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
 

Author Comment

by:medunit
ID: 1856285
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
 
LVL 10

Expert Comment

by:MasseyM
ID: 1856286
Thanks MedUnit
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question