Ændre style ved mouseOver på andet element
Hej folkensJeg sidder og roder rundt i noget JavaScript, som irriterende nok ikke er min stærke side. Jeg kombinerer det med noget PHP, men kan sgu ikke få det til at funke.
I bund og grund skal jeg kunne skifte style (z-index) på en div, når jeg har mouseOver eller mouseOut på nogle andre elementer. Disse elementer stammer fra PHP og er dynamiske.
Det hele ligger i en while løkke i PHP (stort set samme princip som i JavaScript) og dermed skal der noget id ind over, for at vide, hvilken mouseover/mouseout, der hører til hvilket element.
Jeg har tænkt mig frem til en løsning og forsøgt at kode den, men det virker ikke, da der er nogle ting jeg ikke helt har styr på i JavaScript.
Jeg er kommet frem til følgende:
Der kører en løkke i PHP, derfor ønsker jeg at lave det som en funktion, da det er fjollet at køre hele scriptet hver gang løkken repeater.
<head>
<script language="JavaScript">
function mouseOverThumb(e) {
var corr "test" + e;
document.getElementById('corr').this.style.zIndex='-1';
}
function mouseOutThumb(e) {
var corr "test" + e;
document.getElementById('corr').this.style.zIndex='-2';
}
</script>
</head>
<script language="JavaScript">
function mouseOverThumb(e) {
var corr "test" + e;
document.getElementById('corr').this.style.zIndex='-1';
}
function mouseOutThumb(e) {
var corr "test" + e;
document.getElementById('corr').this.style.zIndex='-2';
}
</script>
</head>
Nede i body laver jeg en "funktion" der tæller sig selv op, så hver element dermed får 1, 2, 3 og så videre, så de kan fanges enkeltvis ...
<script language="JavaScript">
var count = 0;
</script>
PHP LØKKE STARTER HER
...
<script language="JavaScript">
var count = count + 1;
var reg = "test" + count;
</script>
<?php
echo "<img class=\"portfolio_no_link\" src=\"../cms/modules/references/references/" . $thumb . "\" width=\"150\" height=\"150\" alt=\"" . $company . "\" onmouseover=\"mouseOverThumb(count)\" onmouseover=\"mouseOutThumb(count)\">";
?>
<div class="fadePic" id="document.write(reg)">
<img style="width: 323px; height: 333px; border: 1px solid #9b3838" src="../cms/modules/references/references/<?php echo $thumb; ?>" alt="<?php echo $company; ?>">
</div>
PHP LØKKE SLUTTER ...
var count = 0;
</script>
PHP LØKKE STARTER HER
...
<script language="JavaScript">
var count = count + 1;
var reg = "test" + count;
</script>
<?php
echo "<img class=\"portfolio_no_link\" src=\"../cms/modules/references/references/" . $thumb . "\" width=\"150\" height=\"150\" alt=\"" . $company . "\" onmouseover=\"mouseOverThumb(count)\" onmouseover=\"mouseOutThumb(count)\">";
?>
<div class="fadePic" id="document.write(reg)">
<img style="width: 323px; height: 333px; border: 1px solid #9b3838" src="../cms/modules/references/references/<?php echo $thumb; ?>" alt="<?php echo $company; ?>">
</div>
PHP LØKKE SLUTTER ...
Umiddelbart efter min mening, burde det jo være tæt på at virke :D Tællefunktionen virker i hvert fald. Der jeg er temmelig sikker på, at jeg har en fejl til gengæld, er i følgende linie
<div class="fadePic" id="document.write(reg)">
Jeg skal have id til at indeholde værdien af variablen reg.
Det ser i hvert fald ikke ud til at virke, som jeg har det der?
Det samme gælder for onmouseover=\"mouseOverThumb(count)\", hvor den også skal sende værdien af variablen count op i funktionen i headeren. Det er jeg ikke sikker på at den gør.
Så jeg håber på, at I lige kan guide mig det sidste stykke.
På forhånd tak :-)
Mvh. Lasse Jensen
