Onmouseover kombineret med andet javascript
Jeg har været ved at udarbejde en hjemmeside som jeg skal bruge til at afvikle noget jeopardy. Koden er skrevet på en måde, så at filen jeopardy.php henter oplysninger fra data_jeopardy.xml og hver gang jeg klikker på et felt så åbner et nyt vindue og generer filen seen.php som er variabel og således henter nye data ind fra databasen afhængig af hvilket felt jeg klikker på f.eks. billedet "100" eller "500".Koden ses herunder - det hele fungerer NÆSTEN i nedenstående kode, men jeg kunne godt tænke mig at kombinere den funktion, at det enkelte billede f.eks. "100.jpg" erstattes med "blaa.jpg" efterhånden som jeg klikker på dem med den funktion at jeg ved onmouseover får indlæst "100_sort.jpg" og ved onmouseout vender tilbage til "100.jpg".
Men såvidt jeg har fået at vide så er disse to funktioner lidt i konflikt med hinanden - men der burde være en løsning på "problemet". Den er vist blot en anelse kompliceret.
Jeg vil gerne undgå at skulle indlæse billedet "blaa.jpg" via min fil "data_jeopardy.xml" da det jo i princippet blot bliver en masse "fyld". Da det jo er fuldstændig det samme billede jeg indlæser hver gang.
Grunden til at jeg gerne vil have begge funktioner til at fungere samtidig er for dels at holde styr på hvilke "kategoribeløb" som er blevet valgt = blankt felt. Samtidig vil jeg gerne gøre sikre at jeg får klikket på det rigtige "kategorifelt" som mine deltagere vælger og dette er meget nemmere når felterne skifter farve, når jeg kører musen henover.
<b>Kode med javascript hvor f.eks. "100.jpg" erstattes med blaa.jpg ved klik og udskiftes med "100_sort.jpg" ved onmouseover og vender tilbage til "100.jpg" ved onmouseout</b>
<b>Som koden er nu herunder fungerer den ikke -fordi "blaa.jpg" ikke indlæses som et blivende billede ved klik.</b>
Håber at en kan hjælpe med at få nedenstående TO FUNKTIONER til at fungere samtidig.
- Jeg er villig til at afsætte flere point, da jeg godt ved at det nok er et lidt vanskeligt spørgsmål.
<html>
<head>
<link rel="stylesheet" type="text/css" href="...../style.css">
<title>JEOPARDY</title>
<script type="text/javascript">
function skiftBillede( id ) {
var pic = document.getElementById( id );
pic.src = "blaa.jpg";
}
</script>
</head>
<body>
<?
include ("MENU");
?>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<table border="0" align="center" width="700" cellpadding="0" cellspacing="0" bgcolor="#0a1888">
<tr><td>
<table border="0" align="center" width="700" cellpadding="0" bgcolor="#0a1888" cellspacing="0">
<tr>
<td colspan="5"><br><h1>JEOPARDY</h1>
</td>
</tr>
<table border="1" align="center" width="700" cellpadding="0" cellspacing="0" bgcolor="#0a1888">
<tr>
<td><h2>Kategori 1</h2></td>
<td><h2>Kategori 2</h2></td>
<td><h2>Kategori 3</h2></td>
<td><h2>Kategori 4</h2></td>
<td><h2>Kategori 5</h2></td>
<?
function getTagString($s,$tag)
{
if (!strpos($s,"</".$tag.">"))
{
return "";
}
$taglength = strlen($tag) + 2;
$startpos = strpos($s,"<".$tag.">")+ $taglength;
$endpos = strpos($s,"</".$tag.">") - $startpos;
return substr($s,$startpos,$endpos);
}
$filename = "data_jeopardy.xml";
$fd = fopen($filename,"r");
$filelines = fread($fd,filesize($filename));
fclose($fd);
$imagecount = 17;
$val = 1;
for ($key=0;$val <> "" ;$key++)
{
$val = getTagString($filelines,"pro$key");
if ($val == "")
break;
?>
<td colspan="5"></td>
<tr>
</tr>
<tr>
<?
for ($i=1;getTagString($val,"piclille$i") <> "" ;$i++)
{
$imagecount++;
?>
<td nowrap align="left"><a onclick="window.open('seen_jeopardy.php?index=<?echo "$key&picnr=$i";?>','_new','scrollbars=no,menubar=no,resizable=no,status=no,width=800,height=450');skiftBillede(<? echo $imagecount;?>);return false;" href="#" onmouseout="document.images[<? echo $imagecount;?>].src='<?echo getTagString($val,"picmoerk$i");?>';window.status='';return true;" onmouseover="document.images[<? echo $imagecount;?>].src='<?echo getTagString($val,"piclille$i");?>';window.status='<?echo getTagString($val,"billedeText$i");?>';return true">
<img src="<?echo getTagString($val,"picmoerk$i");?>" border="0" alt="<?echo getTagString($val,"billedeText$i");?>" id="<? echo $imagecount;?>"></a></td>
<?
}
?>
</tr>
<?
}
?>
<td colspan="5"></td>
</tr>
</table>
</td>
</tr>
</table>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
