nicht angemeldet
sensitive grafik mit hover-effekten
Hallo zusammen..
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?
ist mein problem vielleicht sogar ein fall für den javaskriptthemenbereich?
vielen dank für euer produktives mitdenken.. =)
mfg.. danielT
-
hi
muss ich das große bild nun wirklich in einzelne kleine bilder aufteilen und dann zusammpuzzeln, oder geht das auch einfacher?
er wäre am einfachsten mit mehreren kleinen bildern zu arbeiten, sonst wirst du das große austauschen müssen, oder auf eine andere technik ausweichen, wie z.B. Flash.
ist mein problem vielleicht sogar ein fall für den javaskriptthemenbereich?
es wird das einfachste sein den bildwechsel via javascript zu realisieren.
so long
ole
(8-)>--
Vegetables? Yes,...for example garlic! -
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
-
Hi,
muss ich das große bild nun wirklich in einzelne kleine bilder aufteilen und dann zusammpuzzeln, oder geht das auch einfacher?
Du kannst natürlich stets das komplette Bild wechseln, aber das dürfte größere Ladezeiten bedingen, ggf. auch einen "unruhigen" Wechsel.
ist mein problem vielleicht sogar ein fall für den javaskriptthemenbereich?
Ja. CSS ist hier sowieso untauglich (zum einen wg. der Map, zum anderen IMHO generell beim "Image-Hovern").
Aber letzlich funktioniert der RollOver auch mit einer Map! S. z.B. http://www.vampirehost.de/: Dort werden Image-Maps verwendet, gewechselt werden aber kleinere Grafiken innerhalb und außerhalb der Map (und man könnte ggf. sogar noch die Map selbst wechseln, was aber ein wenig komplzierter ist).
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
Moin moin
Ja. CSS ist hier sowieso untauglich (zum einen wg. der Map, zum anderen IMHO generell beim "Image-Hovern").
Bilder kann man auch mit CSS hovern, allerdings muss man Tricksen.
Hier steht, wie man auf die richtigen Ideen kommt:
http://www.meyerweb.com/eric/css/edge/popups/demo2.html
Mit display:none und einem display:irgendwas für :hover kann man sowieso tolle Sachen machen!
Bei einer Imagemap mit bekannten Koordinaten könnte man mittels Position:absolute die Bilder sogar über dem gehoverten Bereich anzeigen - dann kann man aber nciht mehr draufklicken. :-)
Gruß,
Marc.--
sh:( fo:| ch:? rl:? br:> n4:& ie:% mo:} va:} de:] zu:) fl:( ss:| ls: js:(
http://www.peter.in-berlin.de/projekte/selfcode/?code=sh%3A%28+fo%3A%7C+ch%3A%3F+rl%3A%3F+br%3A%3E+n4%3A%26+ie%3A%25+mo%3A%7D+va%3A%7D+de%3A%5D+zu%3A%29+fl%3A%28+ss%3A%7C+ls%3A+js%3A%28-
Hi,
Bilder kann man auch mit CSS hovern, allerdings muss man Tricksen.
Das weiß ich. :-) Und ich weiß auch wie. 8-)) Und genau *deswegen* halte ich dieses Verfahren (zumindest i.d.R.) auch für unsinnig! =8->
In Kurzform: Anders als z.B. bei JavaScript, hast Du keine Alternative für CSS-lose Browser. Ist dies aber der Fall, so sieht man gar nichts! JavaScript-RollOver sind dagegen eine additive Technik zu HTML. D.h., selbst ohne JS sieht man immer noch die ("HTML"-)Grafik, der Effekt ist ein Bonus.
Man könnte höchstens einen Workaround machen à la
- HTML-Image-Link
- darüber einen CSS-"Hover-Link" plazieren, der den originalen Link einfach komplett überdeckt.
Dann müßte man noch die IMG-Attribute WIDTH & HEIGHT auf 1 setzen und die "wahren" Ausmaße mit CSS festlegen, damit diese Grafik in einem Browser ohne CSS nicht irgendwo (sichtbar) auf der Seite "rumlungert" (womit zwar nicht die Browser abgedeckt werden, die WIDTH & HEIGHT gar nicht interpretieren, aber nun gut: den "Tod" muß man sterben ;))
Viel Heckmeck für einen Effekt, der mit JavaScript so problemlos(!) möglich ist ...
Bei einer Imagemap mit bekannten Koordinaten könnte man mittels Position:absolute die Bilder sogar über dem gehoverten Bereich anzeigen - dann kann man aber nciht mehr draufklicken. :-)
Man könnte einen Link drüberlegen oder "reinpacken". ;-)
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
-
-