mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Mi 24.04.2024 19:17 Benutzername: Passwort: Auto-Login

Thema: hover-zustand mit imagemaps ändern. vom 21.10.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> hover-zustand mit imagemaps ändern.
Autor Nachricht
nhgrafix
Threadersteller

Dabei seit: 13.05.2004
Ort: -
Alter: 44
Geschlecht: Männlich
Verfasst Di 21.10.2008 11:35
Titel

hover-zustand mit imagemaps ändern.

Antworten mit Zitat Zum Seitenanfang

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?
  View user's profile Private Nachricht senden
pixelpapst303

Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht: Männlich
Verfasst Di 21.10.2008 11:46
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Di 21.10.2008 11:51
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
status4

Dabei seit: 01.10.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 21.10.2008 12:15
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
nhgrafix
Threadersteller

Dabei seit: 13.05.2004
Ort: -
Alter: 44
Geschlecht: Männlich
Verfasst Di 21.10.2008 15:30
Titel

Antworten mit Zitat Zum Seitenanfang

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>

  View user's profile Private Nachricht senden
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.