PDA

Click to See Complete Forum and Search --> : span , a:hover, help plz

minulescu
12-13-2002, 01:23 AM
I'm having trouble, in other words i have no clue, how to make this work.
I have 5 images. On a:hover, a "span" with the name of the image pops up somewhere else on the page.
On that place on the page i thought i'd add a permanent "span", named "pick a page".
How can i make that "pick a page" disapper when the a:hover happens??
The problem is, on a:hover, the text will just go over the permanent "pick a page".

Here's a link : http://www27.brinkster.com/minulescu/project.html

Thanks for any help
King Pellinore
12-13-2002, 02:20 AM
As a fast fix, I'd suggest setting the background-color property of the span, then it would cover (given the right z-index) the span underneath. See if this works.
minulescu
12-13-2002, 02:44 AM
dude, you're a genius...or I'm really stupid not to think of it.
Either way, thanks a lot. I have a background image on that table, but its ok, it doesn't really look worse, so thanks a lot.
ShrineDesigns
12-13-2002, 02:48 AM
you're code looks like dog s***


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)">
<meta http-equiv="Page-Exit" content="blendTrans(Duration=1.0)">
<style type="text/css">
<!--
body {
background: url(indexbg.jpg);
background-attachment: fixed;
background-position: center;
}
/* this is the span css */
div {
text-decoration: none;
color: white;
font-family: verdana;
}
/* this is the span with "pick a page" */
.topic {
position: absolute;
align: center;
width: 200px;
top: 380px;
left: 40%;
visibility: hidden;
border-bottom: 1px dashed white;
}
/* end of topic span */
a:hover {
border-color: lime;
}
a:hover span {

position: absolute;
width: 200px;
top: 380px;
left: 50%;
margin: 0px;
border-bottom: 1px dashed white;
z-index:2;
}
.Mimg {
height:90px;
width:120px;
}
-->
</style>
<title> Index </title>
<script type="text/javascript">
<!--
function SD_shiftingLayers(OBJ,V,obj,v) { // ver 1.00
if (document.getElementById || document.all || document.layers) {
SD = document.getElementById(OBJ).style || document.all[OBJ].style || document.layers[OBJ];
}
if (document.getElementById || document.all || document.layers) {
sd = document.getElementById(obj).style || document.all[obj].style || document.layers[obj];
}
SD.visibility = V;
sd.visibility = v;
}
//-->
</script>
</head>
<body bgcolor="#000000">
<br>
<div align="center"><img src="cosmin.gif"><br>
<img src="welcome.gif"></div>
<br>
<br>
<table border="0" align="center" width="770" style="background: url(uptablebg.gif); background-position: center;">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td align="center" valign="middle" height="95"><span class="imglinks"><a href="#"><img class="Mimg" src="blue_forest_small.jpg" border="0" hspace="8" hsrc="blue_night_small.jpg" onMouseOver="SD_shiftingLayers('Profile','visible','Pick','hidden')" onMouseOut="SD_shiftingLayers('Profile','hidden','Pick','visible')"></a>
<a href="#"><img class="Mimg" src="cars2.jpg" border="0" hspace="8" hsrc="cars.jpg" onMouseOver="SD_shiftingLayers('FavCar','visible','Pick','hidden')" onMouseOut="SD_shiftingLayers('FavCar','hidden','Pick','visible')"></a>
<a href="#"><img class="Mimg" src="blue_night_small.jpg" border="0" hspace="8" hsrc="blue_forest_small.jpg" onMouseOver="SD_shiftingLayers('FavAct','visible','Pick','hidden')" onMouseOut="SD_shiftingLayers('FavAct','hidden','Pick','visible')"></a>
<a href="#"><img class="Mimg" src="ronaldo2.jpg" border="0" hspace="8" hsrc="ronaldo.jpg" onMouseOver="SD_shiftingLayers('FavAth','visible','Pick','hidden')" onMouseOut="SD_shiftingLayers('FavAth','hidden','Pick','visible')"></a>
<a href="#"><img class="Mimg" src="anna2.jpg" border="0" hspace="8" hsrc="anna.jpg" onMouseOver="SD_shiftingLayers('FavTen','visible','Pick','hidden')" onMouseOut="SD_shiftingLayers('FavTen','hidden','Pick','visible')"></a></span></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
<div id="FavCar" align="center" class="topic"><b>Cars</b></div>
<div id="FavAth" align="center" class="topic"><b>Favorite Athlete</b></div>
<div id="Pick" align="center" class="topic" style="visibility:visible;"><b>Pick
a Page</b></div>
<div id="FavAct" align="center" class="topic"><b>Favorite Actress</b></div>
<div id="FavTen" align="center" class="topic"><b>Favorite Tennis Player</b></div>
<div id="Profile" align="center" class="topic"><b>Personal Profile</b></div>
</body>
</html>
minulescu
12-13-2002, 03:10 AM
lol
You're right, it does look really bad and since I'm doing this for an html class, my teacher is gonna have a heck of a time looking at it.
Thanks for taking your time, but my rollover of images doesnt work anymore, and I'm not even gonna take the time to look at it, cause i have those 5 pages to do. So, yah, my code looks like crap but the page works fine, so I'll leave it at that.
James L.
12-13-2002, 07:33 PM
"you're code looks like dog s***"



Wow! Now there is a helpful thought. Thank god someone with the obvious superior intelligence required to come up with that is here to help others!
James L.
12-13-2002, 07:35 PM
p.s.

"you're" means YOU ARE... just in case ya didn't know!