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 : <!-- m --><a class="postlink" href="http://www27.brinkster.com/minulescu/project.html">http://www27.brinkster.com/minulescu/project.html</a><!-- m -->
Thanks for any helpAs 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.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.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=http://www.webdeveloper.com/forum/archive/index.php/"cosmin.gif"><br>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"welcome.gif"></div>
<br>
<br>
<table border="0" align="center" width="770" style="background: url(uptablebg.gif); background-position: center;">
<tr>
<td> </td>
</tr>
<tr>
<td align="center" valign="middle" height="95"><span class="imglinks"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><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=http://www.webdeveloper.com/forum/archive/index.php/"#"><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=http://www.webdeveloper.com/forum/archive/index.php/"#"><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=http://www.webdeveloper.com/forum/archive/index.php/"#"><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=http://www.webdeveloper.com/forum/archive/index.php/"#"><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> </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>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."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!p.s.
"you're" means YOU ARE... just in case ya didn't know!
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 : <!-- m --><a class="postlink" href="http://www27.brinkster.com/minulescu/project.html">http://www27.brinkster.com/minulescu/project.html</a><!-- m -->
Thanks for any helpAs 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.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.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=http://www.webdeveloper.com/forum/archive/index.php/"cosmin.gif"><br>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"welcome.gif"></div>
<br>
<br>
<table border="0" align="center" width="770" style="background: url(uptablebg.gif); background-position: center;">
<tr>
<td> </td>
</tr>
<tr>
<td align="center" valign="middle" height="95"><span class="imglinks"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><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=http://www.webdeveloper.com/forum/archive/index.php/"#"><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=http://www.webdeveloper.com/forum/archive/index.php/"#"><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=http://www.webdeveloper.com/forum/archive/index.php/"#"><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=http://www.webdeveloper.com/forum/archive/index.php/"#"><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> </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>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."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!p.s.
"you're" means YOU ARE... just in case ya didn't know!