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

Problem bei onmouseover auf sensitiven Backgroundfotos

T

tycoon

Neues Mitglied
Hallo Leute.
Beschreibung: html-Site hat als Hintergrund ein Disign mit mehreren kleinen Bildern. Diese sind als sensitive areas bereits funktionstüchtig.
guckst du:
HTML: 
<body>
<img usemap="#Bejou" src="../images/background cham bejou.jpg" alt="Bilder" border="0" width="1280" height="1768" >
  <map name="Bejou">
    <area href="../images/Bejou/Bejou a.jpg" alt="Foto" shape="rect" coords="230,273,393,394"</area>
    <area href="../images/Bejou/Bejou f.jpg" alt="Foto" shape="rect" coords="454,276,615,396"</area>
    <area href="../images/Bejou/Bejou e.jpg" alt="Foto" shape="rect" coords="678,275,838,394"</area>

</map>
Klicke ich jetzt auf so einen Bereich, öffnet sich das verlinkte Bild in einem neuen Browserfenster. Soll es aber nicht!
Bei onmouseover soll das verlinkte Bild in groß dargestellt werden (liegen im Extraordner bereit) und bei onmouseout wieder verschwinden.
Bildtausch kommt nicht in Frage, da es nichts zu tauschen gibt. (die kleinen Bilder sind ja Bestandteil des Hintergrundes)
Alle Versuch meinerseits laufen immer darauf hinaus, daß ich die kleinen Bilder wahrscheinlich in die html-Seite einbauen muß. Muß ich das oder gehts besser?
Kennt ihr eine Lösung?

Ich danke euch herzlichst.
tycoon
 
Zuletzt bearbeitet:
Hallo.

Nein, du hast keinen Hintergrund, und die kleinen Bilder sind auch nicht Teil des Hintergrunds.
Ebenso ist das schon in die HTML Seite 'eingebaut'.

Für das was du vorhast solltest du keine Imagemap verwenden sondern Javascript.
Tipps kann ich dir leider keine geben da ich mich mit javascript nicht auskenne.

Gruss
Elroy
 
Hallo Elroy.
Danke für Deine Antwort. Ich formuliere mal etwas anders: Mit einem Bildbearbeitungsprogramm habe ich ein Ornamentbild erstellt (*.jpg) und darin die kleinen Fotos hineinkopiert. Das ganze ist also "fest". Im CSS ist dann dieses Gesamtbild als Hintergrund definiert. Ich würd´s dir gern zeigen, aber solange die Seite noch nicht fertig ist, bleibt sie offline.

Es grüßt herzlichst
Tycoon
 
Hallo.

Tut mir leid, aber denn Code denn du oben zeigst ist eine Imagemap. Und mit einer Imagemap erstellt man nun mal Links.

Von einem CSS ist da nichts zu sehen. Ferner liegt ein Hintergrundbild im Hintergrund, darauf kann nicht zugegriffen werden.
Wenn die kleinen Bilder also Bestandteil des Hintergrunds sind kannst du darauf auch nicht zugreifen.

Gruss
Elroy
 
auch hallo.
ja, da oben steht eine Imagemap.Die ist für die sensitiven Bereiche auf dem Hintergrundbild. Ich will auch nicht auf die kleinen Bilder zugreifen (das das nicht geht ist logisch), sondern auf die identischen Bilder in groß, die in einem anderen Ordner liegen.
In der CSS-Datei steht nur:
* {
margin:0px;
padding:0px;
}
body{
background-image: url(file:///C|/Users/tycoon/Documents/Homepage/images/background%20cham%20bejou.jpg);}

Das ist alles.
Gibt es denn keine Möglichkeit, daß wenn ich mit der Mouse über eine vordefinierte Stelle fahre, daß dann ein Bild eingeblendet wird?

Gruß
Tycoon
 
Klar.

Code: 
#dieStelle { background-image: none; }
#dieStelle:hover { background-image: url(bild.jpg); }
 
Hallo.
ja, das sieht schon mal aus. Probiere ich gleich mal. Dieser hover-Befehl, ist das der, den man auch für veränderbare Buttons nimmt?

Grüßchen
Tycoon
 
Danke an alle Helferlein.
Ich habe beim rumtüfteln eine Lösung gefunden. Für alle, die ähnliches haben: im html
<HTML>
<div id="bejou_f">
<div="Bildtausch" <style="float:left;"></style>
<span onMouseOver="document.img.src='../images/Bejou/Bejou_f.jpg'" onMouseOut="document.img.src='../images/Bejou/Bejou_f klein.gif'">
<a href=""> <img src="../images/Bejou/Bejou_f klein.gif" name="img" border="0"> </a> </span></div>

CSS
#bejou_f{
float: left;
margin-left: 4%;
padding-top: 18%;}

Das ergibt genau den Effekt, wie ganz oben beschrieben.

Tschüß
Tycoon
 
hey thready.
Du hast völlig Recht, dieser "Quellcode" ist wirklich so schlecht, daß er den Namen eigentlich gar nicht verdient. Mittlererweile habe ich viel über HTML und CSS gelesen. Nun habe ich noch mal alles neu gemacht und die Bilder per Java-Script positioniert. Das fertige Teil dann mit dem W3-Validator auf Fehler überprüfen lassen, die nach und nach korrigiert, bis bei HTML und CSS "0 Fehler" stand. Wenn du den sehen könntest - ich glaube du würdest dich freuen.
Es sind 150 Zeilen - ein wenig zu lang, um ihn nur mal so hier zu zeigen. Aber wenn du ihn partout sehen möchtest...
Viele Grüße
Tycoon
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben