Solved

Mouse Hovers, Screen Changes

Posted on 1998-11-10
10
174 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
  • 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
 
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Uploading files to the web server has become common part of almost any kind of web application. People use different technologies to solve this, but regardless of the technology used, it is always useful to have some kind of progress indicator shown…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
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.

708 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now