Ich bekomm den JS Teil einfach nicht gebacken =)
Bild soll angezeigt werden, wenn Maus over.
Kurze Erklärung:
Normal würde mal die src vom Bild einfach angeben. Dabei würden aber bei jedem pageload ~30 Bilder geladen werden.
Daher hab ich die src leer gelassen und per mousover -> JS function src ändern/eintragen -> JS function Container sichtbar machen.
Somit wird immer nur das Bild geladen, welches gerade gebraucht wird.
Nun muss ich aber noch der function, welche den Container sichtbar macht, sagen wenn das Bild fertig ist mit laden.
Die function hab ich schon gefunden:
var logo = document.getElementById('sologo');
logo.onload = function () {
/*ab jetzt ist Bild geladen*/
};
Nur bekomme ich es nicht eingebaut.
Der Ausschnitt mit dem entsprechenden Teil:
<tr style="display:none;" class="hidden" bgcolor="transparent" onmouseover="this.bgColor='#424242'" onmouseout="this.bgColor='transparent'">
<td class="td_wpn_list" style="font-size:12px;text-align: left;" title="column: Weapon">
<div class="box">
MP443 SUPP.
<span>
<img
onmouseover="
changeSrcById('wpn_img_6', 'Images/BF3/weapons/mp443_silenced.png');
setTimeout('toggleById(\'wpn_div_6\'); ', 200);
"
onmouseout="
toggleById('wpn_div_6')
"
style="vertical-align:middle;float:right;cursor:help;" title="show weapon picture" src="Images/help.png" width="13" height="13" alt="(?)"
/>
</span>
</div>
<div id="wpn_div_6" class="weapon_image" style="display:none;">
<img id="wpn_img_6" src="" width='249' height='150' alt=""/>
</div>
</td>
<td class="td_wpn_list" title="column: Class">
pist
</td>
Alles anzeigen
hier meine functions:
function changeSrcById(element, src){
var id = document.getElementById(element);
id.src = src;
}
function toggleById(element){
var id = document.getElementById(element);
(id.style.display == 'none')
? id.style.display = ''
: id.style.display = 'none';
}
Ohne "Bild.onload ..." funktioniert es schon. Hatte es einfach mit einem setTimeout() versucht zu lösen. Ist aber nichts richtiges.
Wollte nun die function changeSrcById() so ändern, dass sie ein true ausgibt, wenn das Bild fertig geladen ist:
function changeSrcById(element, src){
var id = document.getElementById(element);
id.src = src;
id.onload = function () {
return true;
};
}
Nur der Teil das true im HTML aufzugreifen, den bekomm ich nicht hin.
Mein Versuch es einzubauen sieht in etwas so aus:
...
<img
onmouseover="
if(changeSrcById('wpn_img_6', 'Images/BF3/weapons/mp443_silenced.png') === true){
setTimeout('toggleById(\'wpn_div_6\'); ', 200)
}
"
onmouseout=" ...
Funktioniert aber nicht, da die if-Bedingung ja nicht wartet =(
ich schätze da muss ein Eventlistener ran, womit ich mich aber garnicht auskenne.
Jemand ne Idee?