Onmouseover, eine Art Rubbellos

Unregistriert

Okay, leider funkioniert das nicht, auch nicht mit deinem Originalcode Also das mit dem alert...

synaptic

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>rubbelbild mit javascript</title>
    <style type="text/css">
    #bildlayer{


    }
    #rubbelbilder{
    height:240px;
    width:320px;
    }

    .grey{
    background: #cccccc;
    width:10px;
    height:10px;
    display:inline;
    float:left;
    }

    .weg{
    background:transparent;
    width:10px;
    height:10px;
    display:inline;
    float:left;
    }
    </style>

    <script type="text/javascript">
    function machweg(obj){
    document.getElementById(obj).className="weg";
    checkThem();
    }
    function writePic(){
    document.getElementById("bildlayer").style.background = "url( http://home.arcor.de/synaptic/js_rubbelbild/beispielbild0.png)"; 
    }
    function checkThem(){
    var divcount=1;
    var alledivs = document.getElementsByTagName("div");


        for(i=0; i< (alledivs.length-1); i++){
            if(alledivs[i].className=="weg"){
                divcount++;
            }
        }
        if(divcount== (alledivs.length-1)){
            document.getElementById("ausgabe").innerHTML="Du bis durch...!"
        }
    }
    </script>
</head>


<body>
<div id="bildlayer" style="height:240px; width:320px;">
<?php 
$gesamt = (240/10 )*(320/10);  //werte von breite und höhe des bildes geteilt durch die abmessungen der felder aus der rubbelmatrix
for($i=0; $i < $gesamt; $i++){
echo "<div id=\"".$i."\" class=\"grey\" onmouseover=\"machweg(".$i.");\">&nbsp;</div>";
}
?>
</div>
<br style="clear:both;" />
    <script type="text/javascript">
        writePic();
    </script>

    <span id="ausgabe"></span>
</body>
</html>

Alles anzeigen

http://test.kkw-forum.de/rubbel.php

Unregistriert

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

}
#rubbelbilder{
height:150px;
width:150px;
}

.grey1{
background-image: url(http://gutfalkenstein.bplaced.net/test/dreckig/d1.png);
width:150px;
height:150px;

float:left;
}
.grey2{
background-image: url(http://gutfalkenstein.bplaced.net/test/dreckig/d2.png);
width:150px;
height:150px;

float:left;
}
.grey3{
background-image: url(http://gutfalkenstein.bplaced.net/test/dreckig/d3.png);
width:150px;
height:150px;

float:left;
}
.grey4{
background-image: url(http://gutfalkenstein.bplaced.net/test/dreckig/d4.png);
width:150px;
height:150px;

float:left;
}
.grey5{
background-image: url(http://gutfalkenstein.bplaced.net/test/dreckig/d5.png);
width:150px;
height:150px;

float:left;
}
.grey6{
background-image: url(http://gutfalkenstein.bplaced.net/test/dreckig/d6.png);
width:150px;
height:150px;

float:left;
}
.grey7{
background-image: url(http://gutfalkenstein.bplaced.net/test/dreckig/d7.png);
width:150px;
height:150px;

float:left;
}
.grey8{
background-image: url(http://gutfalkenstein.bplaced.net/test/dreckig/d8.png);
width:150px;
height:150px;

float:left;
}
.grey9{
background-image: url(http://gutfalkenstein.bplaced.net/test/dreckig/d9.png);
width:150px;
height:150px;

float:left;
}
.grey10{
background-image: url(http://gutfalkenstein.bplaced.net/test/dreckig/d10.png);
width:150px;
height:150px;

float:left;
}
.grey11{
background-image: url(http://gutfalkenstein.bplaced.net/test/dreckig/d11.png);
width:150px;
height:150px;

float:left;
}
.grey12{
background-image: url(http://gutfalkenstein.bplaced.net/test/dreckig/d12.png);
width:150px;
height:150px;

float:left;
}

.weg{
background:transparent;
width:150px;
height:150px;
display:inline;
float:left;
}
</style>
<script type="text/javascript">
var durch = false;
function machweg(obj){
document.getElementById(obj).className="weg";
checkThem();
}
function writePic1(){
document.getElementById("bildlayer").style.background = "url(sauber/s1.png)";
}
function writePic2(){
document.getElementById("bildlayer2").style.background = "url(sauber/s2.png)";
}
function writePic3(){
document.getElementById("bildlayer3").style.background = "url(sauber/s3.png)";
}
function writePic4(){
document.getElementById("bildlayer4").style.background = "url(sauber/s4.png)";
}
function writePic5(){
document.getElementById("bildlayer5").style.background = "url(sauber/s5.png)";
}
function writePic6(){
document.getElementById("bildlayer6").style.background = "url(sauber/s6.png)";
}
function writePic7(){
document.getElementById("bildlayer7").style.background = "url(sauber/s7.png)";
}
function writePic8(){
document.getElementById("bildlayer8").style.background = "url(sauber/s8.png)";
}
function writePic9(){
document.getElementById("bildlayer9").style.background = "url(sauber/s9.png)";
}
function writePic10(){
document.getElementById("bildlayer10").style.background = "url(sauber/s10.png)";
}
function writePic11(){
document.getElementById("bildlayer11").style.background = "url(sauber/s11.png)";
}
function writePic12(){
document.getElementById("bildlayer12").style.background = "url(sauber/s12.png)";
}
function checkThem(){
var divcount=1;
var alledivs = document.getElementsByTagName("div");

for(i=0; i< (alledivs.length-1); i++){
if(alledivs[i].className=="weg"){
divcount++;
}
}
if(divcount== (alledivs.length-1)){
document.getElementById("ausgabe").innerHTML="Du bis durch...!"
}
}
</script>

</head>
<body>

<tbody>

<tr>

<br style="clear:both;" />
<script type="text/javascript">
writePic1();
</script>

</td>

<br style="clear:both;" />
<script type="text/javascript">
writePic2();
</script>

</td>
<td>

<br style="clear:both;" />
<script type="text/javascript">
writePic3();
</script>

</td>
<td style="width: 150px;">

<br style="clear:both;" />
<script type="text/javascript">
writePic4();
</script>

</td>

</tr>
<tr>
<td>

<br style="clear:both;" />
<script type="text/javascript">
writePic5();
</script>

</td>
<td>

<br style="clear:both;" />
<script type="text/javascript">
writePic6();
</script>

</td>
<td>

<br style="clear:both;" />
<script type="text/javascript">
writePic7();
</script>

</td>
<td><img style="width: 150px; height: 150px;" alt="" src="sauber/s8.png"></td>
</tr>
<tr>
<td><img style="width: 150px; height: 150px;" alt="" src="sauber/s9.png"></td>
<td><img style="width: 150px; height: 150px;" alt="" src="sauber/s10.png"></td>
<td><img style="width: 150px; height: 150px;" alt="" src="sauber/s11.png"></td>
<td><img style="width: 150px; height: 150px;" alt="" src="sauber/s12.png"></td>
</tr>

</tbody>
</table>
<br>
<span id="ausgabe"></span>
</body>
</html>

Mein Code.. Warum wird immer nur dieses d1.png zu s1.png???? Wenn ich über d2.png fahre, möchte ich auch das es zu s2.png wird..

Tags