Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Rollover from Image to text
- Thread starter Slimsteve
- Start date
Hi
Like this ?
Note that Explorer 6 is unable to handle the [tt]:hover[/tt] pseudo-selector for other elements than [tt]a[/tt].
Feherke.
Like this ?
CSS:
[purple].roll[/purple] img [teal]{[/teal] [blue]display:[/blue] [green]inline[/green]; [teal]}[/teal]
[purple].roll[/purple] span [teal]{[/teal] [blue]display:[/blue] [green]none[/green]; [teal]}[/teal]
[purple].roll[/purple][teal]:[/teal]hover img [teal]{[/teal] [blue]display:[/blue] [green]none[/green]; [teal]}[/teal]
[purple].roll[/purple][teal]:[/teal]hover span [teal]{[/teal] [blue]display:[/blue] [green]inline[/green]; [teal]}[/teal]
HTML:
[b]<span[/b] [maroon]class[/maroon][teal]=[/teal][green][i]"roll"[/i][/green][b]>[/b]
[b]<img[/b] [maroon]src[/maroon][teal]=[/teal][green][i]"whatever.png"[/i][/green][b]>[/b]
[b]<span>[/b]Whatever in words[b]</span>[/b]
[b]</span>[/b]Feherke.
Couldn't get it to work Feherke, but this method works o.k across the major browsers. FF, IE8, Safari and Chrome.
And it validates too.
----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
Code:
a.rollover{
width:80px; [green]Width and height should match image dimensions, to avoid changes, and page jumping[/green]
height:25px;
display:block;
background-image:url('image.png');
}
a.rollover span{
display:none;
}
a.rollover:hover{
background-image:none;
}
a.rollover:hover span{
display:inline;
}
</script>
<body>
<a href="#" class="rollover" ><span>rollover Text</span></a>
</body>And it validates too.
----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
- Thread starter
- #4
- Status
Similar threads
- Locked
- Question
- Locked
- Question