• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Element soll sich transparent verhalten

C

CSSteff

Neues Mitglied
Hallo,

ich habe momentan folgendes Problem:
Wenn ich eine Bild-Region (map) betrete, löst das OnMouseOver eine JavaScript-Funktion aus, die in dieser Region ein anderes Bild überlagert (der gestrichelte, weiße Kreis, siehe Link unten). Wenn der Mauszeiger nun über das neue Bild ist, löst das bei der alten Region ein OnMouseOut aus, was zur Folge hat, dass der Kreis, der gerade erschienen ist, wieder verschwindet.
Ich will nun, dass der weiße Kreis, der eingeblendet wird, sich völlig transparent verhält, d. h., es darf kein OnMouseOut beim darunter liegendem Bild auslösen.

Geht das irgendwie?!

Danke im Voraus.

Hier ist die Webseite:

http://home.arcor.de/steff-d/

L. G.,
CSSteff
 
Werbung:
Alles geht irgendwie.

Ich würde es ohne ImageMap lösen. Das Bild als background-image auf den Body und die Spots mit den Frauen entweder als Canvas zeichnen, sofern es tatsächlich Polygone sein müssen, oder mit offset().left() und offset().top festlegen, falls Rechtecke reichen. Analog zu offset() gibt es pageX und pageY, um die Position des Cursors auszulesen. Damit baut man ein Event für mousemove(), um die Kreise zu zeichnen und eins für click(), um die Seiten zu laden.
 
Danke, für deine Antwort. Hmpf, dann müsste ich quasi alles umbauen und ich wollte eigentlich so wenig JS wie möglich!
Kann man nicht Kreise mit JS zeichnen, ohne ein HTML-Element wie <img> zu benutzen? Das Problem ist eben das HTML-Element. Wenn jedoch einfach nur "rohe Pixel" als Kreis gezeichnet werden und diese das Bild überdecken, dürfte es keine Probleme geben. Ich weiß nur nicht, ob das möglich ist.
Gibt es eine Möglichkeit mit JS einfach nur zu malen ohne irgendwelches DOM-Gedöns?!

L. G.,
CSSteff
 
Werbung:
Naja, du hast einerseits die Spots, welche das jeweilige Event triggern sollen und andererseits die Spots, wo die Kreise erscheinen. Zum Zeichnen der Kreise per JS hieße der Ansatz Canvas. Der Part ließe sich aber sogar einfacher lösen. Nimm das Bild als background-image und positioniere darüber drei HTM-Container für die Kreise. Diese erhalten einen weißen Rahmen, einen border-radius und display: none. Dann sind sie unsichtbar und lassen sich per JS ein- und ausblenden.
 
Ich habe eine andere Lösung ausgearbeitet, bei der Du nicht so viel ändern musst:
Code: 
<body style="background-image: url(lektorat_im_team.jpg)">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

<!-- Add your site or application content here -->

<img style="z-index: 2; position: absolute" id="target" src="transparent.png" style="display: block; margin-left: auto; margin-right: auto; width:1120; height: 840; z-index:1;" alt="Lektorat im Team" usemap="#Lektorat_im_Team">

<img id="Angela" class ="hover" src="Leistungen_Angela_Beck_medium.png" >
<img id="Marianne" class ="hover" src="Leistungen_Marianne_Manske_medium.png" >
<img id="Therese" class ="hover" src="Leistungen_Therese_Schafstall_medium.png" >

<img id="Kreis" class ="hover" src="Kreis.png" style="z-index: 1">
Der Kreis bekommt einen z-index von 1 und das Bild mit der Imagemap ist transparent und bekommt einen z-index von 2, so dass es über dem Kreis liegt. Weil das Bild transparent ist, ist der Kreis trotzdem sichtbar. Damit das richtige Bild dennoch sichtbar ist, wird es als Hintergrundbild unter alles gelegt.
Vielleicht noch etwas mit den Ausrichtungen arbeiten, damit sich die dynamischen Bilder mit dem Hintergrundbild besser decken.
 
Zuletzt bearbeitet von einem Moderator:
Hi Sempervivum,

großen Dank für diese fast perfekte und einfallsreiche Lösung!!!

Bei deiner Lösung war das Hintergrundbild bei mir linksbündig und wiederholend, also versuchte ich es zu zentrieren:

HTML: 
    <body style="background-image: url(lektorat_im_team.jpg); background-repeat:no-repeat; background-position:center center;">
Was komischerweise dazu führte, dass man nur die untere Hälfte des Bildes sieht. Das ist doch nicht normal, oder?
Der neueste Stand ist hochgeladen:

http://home.arcor.de/steff-d/

L. G.,
CSSteff
 
Werbung:
Ist ja witzig! Leider ist CSS nicht meine Stärke, so dass ich diesen Effekt nicht erklären kann. Das Bild ist jedoch vollständig sichtbar, wenn man es oben anheftet: background-position: center 0px;
U. U. hast Du es mit der Ausrichtung leichter, wenn Du alle Bilder in einen div-Kontainer legst und diesen zentrierst. Dann bezieht sich die Position der dynamischen Bilder auf diesen Kontainer und ändert sich nicht, wenn sich die Größe des Browserfensters ändert.
 
Vielen Dank, das hat geholfen!!! :)
Ich werde mich nun an die Feinarbeit machen. Das mit dem Div-Container ist eine gute Idee!

Liebe Grüße,
CSSteff
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben