nicht angemeldet
Hallo,
ich versuche ein gesicht zur navigation zu benutzen, das klappt durch hotspots in der sensitiven grafik (dem gesicht) auch wunderbar =)
nun rätzel ich wie dort ich es schaffe, das beim curserüberqueren ein effekt im bereich des linkes erscheint.
wie mir bekannt ist geht soetwas nr mit kompletten bildern und nicht mit bildbereichen.
muss ich das große bild nun wirklich in einzelne kleine bilder aufteilen und dann zusammpuzzeln, oder geht das auch einfacher?
Ich würde es so versuchen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Bild-Navigation frei positionierbar</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
#navigation {position:absolute; top:10px; left:5px; width:200px; height:400px; border:1px solid black; background-image:url(canva.jpg);}
#navigation img {position:absolute; top:0; left:0;}
#home {display:block; position:absolute; width:50px; height:50px; top:80px; left:20px; background-color:#00AEAD;}
#me {display:block; position:absolute; width:50px; height:50px; top:90px; right:20px; background-color:#00AEAD}
#other {display:block; position:absolute; width:50px; height:50px; top:180px; left:80px; background-color:#00AEAD}
#home:hover {background-color:#FF7D7B;}
#me:hover {background-color:#FF7D7B;}
#other:hover {background-color:#FF7D7B;}
#inhalt {margin-left:205px;}
-->
</style>
</head>
<body>
<div id="navigation">
<a href="#" id="home">home</a>
<a href="#" id="me">me</a>
<a href="#" id="other">other</a>
</div>
<div id="inhalt">
<h1>Überschrift</h1>
<h2>Überschrift</h2>
<p>Text Text Text Text Text Text Text</p>
</div>
</body>
</html>
Das, was ich hier mit background-color gemacht habe, kann man auch mit background-image machen. Du brauchst dann natürlich die einzelnen Bildausschnitte.
ist mein problem vielleicht sogar ein fall für den javaskriptthemenbereich?
Nein.
viele Grüße
Axel