|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
|
|
#1
February 13th, 2004, 07:05 PM
|
|||
|
|||
|
CSS image/text rollovers- how?
Using either CSS, or JavaScript, or a combination of both; is it possible to do this without using frames?:
image1 and image2 are laid out horizontally across the top of the page. When the mouse hovers over image1, a formatted body of text (lets call it "text1") is displayed beneath the layout of images. As the mouse leaves image1, the text disappears. When the mouse hovers overs over image2, a different body of text ("text2") appears in the same area where text1 was displayed. It also disappears as the mouse leaves. I am probably very obviously a newbie. I have read examples that show how to do similar things with frames, and I can script simple image rollovers, but I am a little lost here, so even if this is too basic a question, if you can point me in the right direction to learn how, I would appreciate it much. Thanks in advance for any help or suggestions!
|
|
#2
February 13th, 2004, 07:39 PM
|
||||
|
||||
|
Writing a script to do that is fairly simple.
The method I would use is to contain the formatted text in a div and change it's display properties via javascript: Code:
(untested)
<html>
<head><title>Test</title>
<style>
#i1 /* formatting for image 1 text */
{
display: none;
font: 10pt "Tahoma";
}
#i2 /* formatting for image 2 text */
{
display: none;
font: 10pt "Tahoma";
}
</style>
<script>
function show_chunk(id)
{
var chunk = document.getElementById(id);
chunk.style.display = "block";
}
function hide_chunk(id)
{
var chunk = document.getElementById(id);
chunk.style.display = "none";
}
</script>
</head>
<body>
<img src="image1.gif" onmouseover="show_chunk('i1');" onmouseout="hide_chunk('i1');">
<img src="image2.gif" onmouseover="show_chunk('i2');" onmouseout="hide_chunk('i2');">
<div id="i1">
This is the text for our first image. It cannot be seen until the image is hovered over.
</div>
<div id="i2">
This is the text for our second image. It cannot be seen until the image is hovered over.
</div>
...
rest of html
A word of warning: if you don't preserve a spot for the text to display into, you will experience "reflow," or dynamic redrawing of your page (ie when you hover over the image, the text that shows will "push" the rest of the page down). There are two ways to prevent this: you can set the display property (ie chunk.display) to hidden, or you can save it a spot by using CSS. I prefer using CSS because I feel it gives me more control than letting the browser decide. HTH
__________________
Obstruct the doors, cause delays, be dangerous.
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > CSS image/text rollovers- how? |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
