zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Profifrage: Imagemap auf div mit background-image?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.03.2011, 16:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.08.2010
Beiträge: 21
freejay befindet sich auf einem aufstrebenden Ast
Standard Profifrage: Imagemap auf div mit background-image?

Hi,

ich habe einen sehr komplizierten Fall und wollte mal fragen ob meine Gedanken dazu sinnvoll sind.

Situation:
Ich habe eine Page mit Characters (Figuren) die natürlich nichtmal annähernd ein eckiges Shape haben.
Die Characters liegen in einem div und sind als background-image definiert.
Aktuell ist es so, dass wenn man über das div hovert, per javascript im hintergrund ein weiteres div eingeblendet wird, mit dem die figuren ein "outline" erhalten. Außerdem sind die divs verlinkt. bzw. es befindet sich ein <a> in entsprechender div größe darin mit Link.

Zukünftig soll nun exakt das Shape der Charaktere verlinkt sein u. der hover effekt (mit outline) dann auch nur beim hovern über genau den shape der charaktere gelegt werden.
D.h. die Verlinkung und der entsprechende Hover effekt finden nur innerhalb der umrisse der charaktere statt.

Das kann man nur mit einer image map lösen, sehe ich das richtig?
Sehe ich es richtig dass ich mir dann in adobe fireworks meine imagemap erstelle, zusätzlich ein dummy-img erstellen muss (in größe des divs bereichs, in dem dann die imagemap liegen soll), das dummy-image setze ich auf visibility hidden und dann habe ich nur den shape der imagemap vorhanden der auf meinem div mit dem background image liegt und kann dann der imagemap eine klasse geben, um schließlich auch in javascript usw. den shape für den hover (mouseover) effekt zu nutzen und zu verlinken usw.?

Ich hoffe meine problemstellung kommt klar rüber

Danke für eure Tipps schonmal im voraus

Geändert von freejay (11.03.2011 um 17:00 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.03.2011, 14:04
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 887
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

Ja, das siehst Du richtig. Im einfachsten Fall hast Du das ImageMap selbst mit einer Grafik und beliebig viele <area>'s darauf. Bei jedem <area> definierst du per onmouseover eine JavaScript-Funktion die das Bild in dem <img> des ImageMap austauscht und per onmouseout setzt Du wieder das Originalbild ein.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 20:29
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 17:53
Schriftfarbe in den Eintragungsfeldern von jforms Steveislucky CSS 2 16.03.2010 11:59
CSS Text nebeinander? carstiee09 CSS 13 13.11.2009 20:18
Linkverhalten im IE6 ChOpSueY! CSS 19 19.05.2008 23:48


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:08 Uhr.