Solved

Mouse Hovers, Screen Changes

Posted on 1998-11-10
10
184 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 50 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
Monthly Recap

May was a big month for new releases from Linux Academy! Take a look at what our team built recently in our blog. You can access the newest releases from our blog.

 
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

SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

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. …
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

705 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