Autor |
Nachricht |
nhgrafix
Threadersteller
Dabei seit: 13.05.2004
Ort: -
Alter: 44
Geschlecht:
|
Verfasst Di 21.10.2008 11:35
Titel hover-zustand mit imagemaps ändern. |
|
|
Habe folgendes Problem:
eine Leiste mit 3 Bildern, wenn man mit der Maus über die Bilder geht sollen Infos eingeblendet werden, Ich würd das gern mit 3 versch. Bilder realisieren in denen der Text enthalten ist.
Aber Imagemaps kann ich doch nur durch "klicken" steuern, oder wie schauts aus?
Würds ja auch gerne mit Flash machen, aber das gibts hier nicht...
Hat wer ne Idee?
|
|
|
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Di 21.10.2008 11:46
Titel
|
|
|
js: onmouseover() ???
theoretisch denke ich auch mit :hover (css) möglich. dann aber nur in verbindung mit whatever:hover (ie6) ... wenn ich mich nicht irre... und dann wohl auch ne ziemliche frickelei wegen pixelgeneauer positionierung... je nach vorhaben.
|
|
|
|
|
Anzeige
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Di 21.10.2008 11:51
Titel
|
|
|
mit javascript etwa so (sehr einfaches bsp)
JAVASCRIPT
Code: |
function sichtbar() {
document.getElementById('bild1').style.visibility = "visible";
return true;
}
function unsichtbar() {
document.getElementById('bild1').style.visibility = "hidden";
return true;
}
|
HTML
Code: |
<a href="#" onClick="return sichtbar();" onMouseOut="return unsichtbar();"><img src="test.jpg" alt="" /></a>
<br />
<div id="bild1" style="visibility:hidden;">Dein Text</div>
|
aber wie pixelpapst schon sagte, über css ist das auch zu lösen.
wenn du so ein bsp benötigst, sag bescheid.
zu Eventhandlern
http://de.selfhtml.org/javascript/sprache/eventhandler.htm
Zuletzt bearbeitet von Kash am Di 21.10.2008 11:51, insgesamt 1-mal bearbeitet
|
|
|
|
|
status4
Dabei seit: 01.10.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 21.10.2008 12:15
Titel
|
|
|
pixelpapst303 hat geschrieben: | theoretisch denke ich auch mit :hover (css) möglich. dann aber nur in verbindung mit whatever:hover (ie6) ... wenn ich mich nicht irre... und dann wohl auch ne ziemliche frickelei wegen pixelgeneauer positionierung... je nach vorhaben. |
Wäre gar nicht so problematisch je nach Anforderung. Eine Skizze wäre ganz gut damit man
besser versteht was genau du möchtest und wie es zum Schluß dann wirklich aussehen soll.
|
|
|
|
|
nhgrafix
Threadersteller
Dabei seit: 13.05.2004
Ort: -
Alter: 44
Geschlecht:
|
Verfasst Di 21.10.2008 15:30
Titel
|
|
|
Ui, danke schön, das hat mir schonmal enorm weitergeholfen!
Nur leider noch nicht komplett. Ich hab mich wohl doof ausgedrückt, die Bilder müssen quasi ersetzt werden. Ich poste den Code mal, vielleicht wird da wer schlau draus. In Firefox funzts z.b. und in Safari gehts gar nicht..
anbei der code.
Code: |
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function sichtbar() {
document.getElementById('bild1').style.visibility = "visible";
document.getElementById('ursprung').style.visibility = "hidden";
return true;
}
function unsichtbar() {
document.getElementById('bild1').style.visibility = "hidden";
document.getElementById('ursprung').style.visibility = "visible";
return true;
}
</script>
<!-- CSS -->
<style type="text/css" >
#ursprung { float: left;
position:absolute;
top:0px;
left:0px;}
#bild1 {float:left;
position:absolute;
top:0px;
left:0px;}
</style>
</head>
<body>
<div id="ursprung">
<img src="0.gif" width="260" height="100" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="125,44,156,72" href="#" onmouseover="return sichtbar();" onMouseOut="return unsichtbar();"></div>
<div id="bild1" style="visibility:hidden;"><img src="1.gif"></div>
</map>
</body>
</html>
|
|
|
|
|
|
|
|
|
Ähnliche Themen |
hover-Button/hover-Bild wird darunter eingefügt
RollOver Zustand in Flash AS2?
Farbig hinterlegt bei aktivem Zustand
User nur bei eingeloggten Zustand pers. Ansprechen
Imagemaps aus .eps
[JavaScript] Accordion-Effekt mit Aktiv-Zustand versehen
|
|