/    Sign up×
Community /Pin to ProfileBookmark

span , a:hover, help plz

Copy linkTweet thisAlerts:
Dec 13.2002

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 : [url]http://www27.brinkster.com/minulescu/project.html[/url]

Thanks for any help

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@King_PellinoreDec 13.2002 — 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.
Copy linkTweet thisAlerts:
@minulescuauthorDec 13.2002 — 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.
Copy linkTweet thisAlerts:
@ShrineDesignsDec 13.2002 — 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>
Copy linkTweet thisAlerts:
@minulescuauthorDec 13.2002 — 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.
Copy linkTweet thisAlerts:
@James_L_Dec 14.2002 — "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!
Copy linkTweet thisAlerts:
@James_L_Dec 14.2002 — p.s.

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

Success!

Help @minulescu spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...