Antworten zum Thema „need help @ bilder button navigation“

[DavidCaspar]

hi @ all,

Ich hab eine Navigation erstellt
Jeder Menüpunkt ist ein kleiner div-container mit einem bild drin.
So ich möchte nun, das wenn man mit der Maus über den div fährt (onmousemove), ein anderes bild in den div geladen wird. Die Divs sind alle position:absolute positioniert. (per externem css)

Ich hab mit javascript deshalb eine kleine Funktion versucht zu schreiben, die bei onmousemove einen bildertausch machen soll.

Nur folgendes Problem:
Wenn ich nun mit der maus über einen menüpunkt fahre, läd er mir zwar das neue bild aber setzt es irgendwo in die page und net in den div container bzw tauscht das bild nicht aus und zerschreddert mir damit mein ganzes design


ich post am besten mal mein javascript:

news = new Image();
news.src ="img/buttons/news.jpg";
newsro = new Image();
newsro.src = "img/buttons/rollover/news.jpg";

function Bildwechsel (Bildnr, Bildobjekt) {
  window.document.images[Bildnr].src = Bildobjekt.src;

Und das dazugehörige HTML:

<div id="news">
<a href="#" onmouseover="Bildwechsel(0, newsro)">
<img src="img/buttons/news.jpg" alt="News Neuigkeiten" />
</a>
</div>

Ich möcht halt gern, dasser mir bei onmousemove des bild austauscht und beim verlassen des buttons wieder das alte reinlädt.

Das Problem is wahrscheinlich dasser net weiss wohin mit dem neu geladenen bild. Weiss vielleicht jemand von euch, wie ich das schreiben muss damit er weiss, dass das neue bild das alte bild austauschen soll in dem positionierten div?

Kann mir jemand helfen :'(

 

[stb_87]

AW: need help @ bilder button navigation

Warum machst du das nicht mit CSS?!

In den div schreibst du den Text, das div bekommt eine ID oder class zugewiesen und bei den CSS-Eigenschaften definierst du per Pseudo-Klasse hover deinen gewünschten Effekt:

Navigation mit Grafik-Buttons - jswelt - Forum (Javascript, PHP, MySQL, AJAX, Webdesign)

grafik-rollover mit css - mediengestalter.info

Ein paar Anregungen

 

[gnol]

AW: need help @ bilder button navigation

Ich würde da auch am besten CSS nehmen..

Hier ein Beispielcode:

HTML:

<div id="getbox"><a href="./"></a></div>

#getbox a { 
  display:block;
  background: url('./PFAD ZUR BILDDATEI');
  width: 100px; 
  height: 30px;
}
#getbox a:hover { 
  display:block;
  background: url('.PFAD ZUR BILDDATEI HOVER'); 
}

 

[sokie]

AW: need help @ bilder button navigation

Hallo David,
Das ist ein interessantes phänomen. vielleicht könntest du mal den gesamten Quelltext posten, oder einen link zu der Seite?

_______________________________
ps. ja, das macht man besser mit css

 

[NF_Darklord]

AW: need help @ bilder button navigation

also Css wäre schon empfehlenswert, da hier die Ladezeit sowie der Traffic reduziert werden kann, da css im cache des Browsers gespeichert wird.

 

[DavidCaspar]

AW: need help @ bilder button navigation

Vieeeeeeeeeeeeeeeeelen Dank gnol :lol:
Deine Lösung ist perfekt, genau das was ich gesucht hab. Funktioniert prima

 

[gnol]

AW: need help @ bilder button navigation

no problem ^^