Links erst bei MouseOver anzeigen lassen in <div>`s

Mathao · #1 (**permalink**) 10.11.2007, 21:45

Hallo zusammen,
ich habe ein paar Fragen wie man links bei einer Grafik erst beim MouseOver anzeigen lassen kann und dies über der ganzen Fläche des MouseoverBildes, sprich die klickbare link-Fläche soll über den Textlink hinaus gehen.
Die beiden Grafiken befinden sich in zwei verschiedenen <div>`s.
Vielleicht bin ich auch auf der falschen Fährte mit den <div>`s und sollte irgendwas andres probieren.
Wenn ich einen link in das <div> setze, ist der Text zwar zentriert, aber befindet sich nicht in der Mitte der Grafik, sondern nur in den ersten Zeilen oben, je nachdem wie groß die Schriftart ist.
Wie gesagt, vielleicht bin ich auch auf der falschen Fährte, das so zu realisieren.
Danke für eure Hilfe, hier der Code.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="Homepage-Dateien/css/DieterHoffmann2.css" />
<script type="text/javascript" src="Homepage-Dateien/js/dropdown.js"></script>
</head>

<body>

<div id="start"><a href="#" >enter</a></div>
<div id="start2"></div>


</body>
</html>

Code:

/* CSS-Code */
	font-family: verdana,arial, sans-serif;
	font-size:18px;
  	color:#FFFFFF;
 	font-family: verdana ,arial ,sans-serif;	
	}
	
#start {
	font-size:18px;
  	color:#FFFFFF;
	background: url("Bilder/Bild4.jpg") no-repeat;
	width: 152px;
	height: 100px;
	margin:  50px 500px;
	text-align: center ;
	position:absolute;
	
	}
	
#start a {
	font-size:18px;
  	color:#FFFFFF;
	margin:  auto;
	position:relative;
	text-decoration:none;
	text-align:center;
	
	}
	
#start:hover {
	font-size:18px;
  	color:#FFFFFF;
	background: url("Bilder/Bild4a.jpg") no-repeat;
	width: 152px;
	height: 100px;
	margin:  50px 500px;
	text-align: center ;
	z-index: 1;

	}
	
#start a:hover {
	font-size:18px;
  	color:#ffffff;
	width: 152px;
	height: 100px;
	margin: auto;
	text-align: center ;
	z-index: 1;
	

	}
	

#start2 {
	font-size:18px;
  	color:#FFFFFF;
	background: url("Bilder/Bild2.jpg") no-repeat;
	width: 94px;
	height: 94px;
	margin: 30px 450px;
	text-align: center ;
	position:absolute; 
	
	}
	
#start2:hover {
	font-size:18px;
  	color:#FFFFFF;
	background: url("Bilder/Bild2a.jpg") no-repeat;
	width: 96px;
	height: 96px;
	margin: 30px 450px;
	text-align: center ;
	position:absolute; 
	text-decoration:none;
	
	}

Crizzo · #2 (**permalink**) 10.11.2007, 22:16

So wie hier: The StyleWorks { Herzlich Willkommen } fahr mal über die Links am linken Rand und oben in der Mitte.

Mathao · #3 (**permalink**) 10.11.2007, 22:39

Danke für deine Antwort Hawk.
Ich wollte aber den link, sprich den Text erst anzeigen lassen, wenn ich mit der Maus drüber scrolle, bei dem Seitenbeispiel steht der Text ja schon von vorne herein drin.
Darüber hinaus bin ich leider ein zu großer Anfänger, um bei so einer großen Seite, die passenden Informationen, die mein Problem lösen heraus zu filtern.
Würde mir das jemand etwas genau erklären bitte?

Crizzo · #4 (**permalink**) 10.11.2007, 22:41

Wo steht bitte der Text schon da? Wenn du über den Link fährst, öffnet sich rechts oben ein Fenster mit einer Beschreibung. Hast du das gemerkt? Suchst du sowas?

Mathao · #5 (**permalink**) 10.11.2007, 23:31

Zitat:

Zitat von BlackHawk

Wo steht bitte der Text schon da? Wenn du über den Link fährst, öffnet sich rechts oben ein Fenster mit einer Beschreibung. Hast du das gemerkt? Suchst du sowas?

Nee sowas such ich nicht, am Beispiel von Styleworks wäre der Text Grundlagen, Schnellreferenz, Home und co nicht sichtbar. Erst beim Mouseover würde der Text sichtbar werden in der Navigation. Frage ist ob man das irgendwie anders als nur mit Grafiken lösen kann.
Ich mein ich könnte natürlich die eine Grafik ohne Text und die andre mit abspeichern und dann ein einfaches MouseOver machen, aber das wollte ich nicht. Ich wollte es mit links versuchen. Wenn das nicht geht hat sich das erledigt.

Crizzo · #6 (**permalink**) 10.11.2007, 23:37

D.h. du willst ein leeres Element und wenn man mit der Maus drüber fährt soll es angezeigt werden?
Du könntest <a> display:block geben und diese Fläche wäre dann "überfahrbar". Innerhalb von <a> befindet sich ein <span>, der erst sichtbar wird, wenn man mit der Maus drüber fährt.

Code:

<a href="#"><span> Bla blubb</span></a>

CSS:

Code:

a span {visibility:hidden; }

a:hover span {visibility:visible; 
}

Sowas?

Mathao · #7 (**permalink**) 11.11.2007, 00:09

EDIT : So danke für die Hilfe Hawk, hab alles hinbekommen, hat super geklappt hier das Ergebnis :

Untitled Document

Mathao · #8 (**permalink**) 11.11.2007, 23:27

Entschuldigt den Doppelpost, aber sonst geht das hier unter.
Ich hab alles soweit hingebogen, nur leider zeigt mir der IE die Grafik etwas anders an, als ob der z index nicht funktionieren würde. Beim Mouseover sind im IE die Grafiken immer noch an gleicher Stelle und werden nicht nach oben geschoben über alle andren Grafiken.
Jemand ne Ahnung, an was das liegen könnte?

Untitled Document

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="Homepage-Dateien/css/Startseite.css" />
<script type="text/javascript" src="Homepage-Dateien/js/dropdown.js"></script>
</head>

<body>
<div id="aussen">
<div id="Text"><a href="Hauptseite.html">Dieter<br />Hoffmann</a></div>
<div id="Bild1"><a href="Hauptseite.html"></a></div>
<div id="Bild2"><a href="Hauptseite.html"></a></div>
<div id="Bild3"><a href="Hauptseite.html"></a></div>
<div id="Bild4"><a href="Hauptseite.html"></a></div>
</div>
</body>
</html>

Code:

* {
	margin:0;
	padding:0;
	border:0;
	}
	
body {
	background-color: #222325;
	font-family: verdana,arial, sans-serif;
  	color:#FFFFFF;
 	font-family: verdana ,arial ,sans-serif;	
	}
	
#aussen {
		width:60px;
		height: 60px;
		margin: 250px auto;
		position:relative;
		}	
		
#Text {
font-family: verdana,arial, sans-serif;
font-size: 15px;
text-decoration: none;
color:#FFFFFF;
margin: 57px -60px;
position: absolute;

}		
		
#Text a {
font-family: verdana,arial, sans-serif;
font-size: 15px;
text-decoration: none;
color:#FFFFFF;

}		
		
		
	
#Bild1 {
	font-size:10px;
  	color:#FFFFFF;
	background: url("Bilder/Bild1b.jpg") no-repeat;
	width: 87px;
	height: 58px;
	margin:2px 2px;
	float:left;
	position:absolute;
	z-index: 0;
	}
	
#Bild1 a {
	font-size:10px;
  	color:#FFFFFF;
	width:87px;
	height: 58px;
	position:absolute;
	float:left;
	margin: auto;
	text-decoration:none;
	padding: 0px 0px 0px 0px;
	z-index: 3;
	}
	
#Bild1:hover {
	font-size:10px;
  	color:#FFFFFF;
	background: url("Bilder/Bild1a.jpg") no-repeat;
	width: 87px;
	height: 58px;
	margin:  2px 2px;
	float: left;
	z-index: 3;
	}
		
/*******************************************/

#Bild2 {
	font-size:10px;
  	color:#FFFFFF;
	background: url("Bilder/Bild2b.jpg") no-repeat;
	width: 53px;
	height: 81px;
	margin: 40px 25px;
	float: left;
	position:absolute; 
	z-index: 2;
	}

#Bild2 a {
	font-size:10px;
  	color:#FFFFFF;
	width:53px;
	height: 81px;
	position:absolute;
	float: left;
	margin: auto;
	text-decoration:none;
	padding: 0px 0px 0px 0px;
	z-index: 2;
		}
	
#Bild2:hover {
	font-size:10px;
  	color:#FFFFFF;
	background: url("Bilder/Bild2a.jpg") no-repeat;
	width: 53px;
	height: 81px;
	margin:  40px 25px;
	float: left;
	z-index: 2;
	}
	
	
	
/*******************************************/

#Bild3 {
	font-size:10px;
  	color:#FFFFFF;
	background: url("Bilder/Bild3b.jpg") no-repeat;
	width: 59px;
	height: 59px;
	margin: 95px auto;
	float: left;
	position:absolute; 
	z-index: 1;
	}

#Bild3 a {
	font-size:10px;
  	color:#FFFFFF;
	width:59px;
	height: 59px;
	position:absolute;
	float: left;
	margin: auto;
	text-decoration:none;
	padding: 0px 0px 0px 0px;
	z-index:2;
		}
	
#Bild3:hover {
	font-size:10px;
  	color:#FFFFFF;
	background: url("Bilder/Bild3a.jpg") no-repeat;
	width: 59px;
	height: 59px;
	margin:  95px auto;
	float: left;
	z-index: 2;
	}
	
	
	
/*******************************************/

#Bild4 {
	font-size:10px;
  	color:#FFFFFF;
	background: url("Bilder/Bild4b.jpg") no-repeat;
	width: 93px;
	height: 60px;
	margin: 130px 25px;
	float: left;
	position:absolute; 
	z-index: 0;
	}

#Bild4 a {
	font-size:10px;
  	color:#FFFFFF;
	width:93px;
	height: 60px;
	position:absolute;
	float: left;
	margin: auto;
	text-decoration:none;
	padding: 0px 0px 0px 0px;
	z-index: 2;
		}
	
#Bild4:hover {
	font-size:10px;
  	color:#FFFFFF;
	background: url("Bilder/Bild4a.jpg") no-repeat;
	width: 93px;
	height: 60px;
	margin:   130px 25px;
	float: left;
	z-index: 2;
	}

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten	mazzo	CSS	10	05.04.2012 17:32
Bräuchte Hilfestellung weil meine Seite nicht richtig angezeigt wird.	Picasso	CSS	36	03.01.2011 19:41
Holy Grail und der Internet Explorer!	ONeill	CSS	23	01.06.2006 18:20
wechselnde Bilder (Links) bei Mouseover	Dennis77	CSS	6	09.02.2006 16:18
Probleme mit 3 spalten	luk	CSS	3	08.06.2005 14:39