Onmouseover, eine Art Rubbellos

Unregistriert

Hallo, meine Frage ist: kann ich mit einem onmouseover eine Art Rubbellos bauen? Dass heißt, am Anfang ist z.B. ein T-Shirt mit vielen Flecken zu sehen, ich fahr mit der Maus drüber und die Flecken verschwinden... Als wenn ich es mit der Maus wasche. Geht das, wenn ja wie?

synaptic

mit javascript ginge des...
mmh naja du müsstest da mit mehreren bildern arbeiten
dann ne funktion schreiben die die bilder nacheinander ablaufen lässt mit ner kleinen pause zwischen dem bildwechsel..
und das ganze rufste onmousmove auf...
das eigentliche bild würd ich in einem layer unter dem rubbelbild legen, so brauchste nicht für jedes bild nen eigenes freirubbeldings machen.

ansonsten mit flash oder in java(als applet)

Unregistriert

Bin Javascript Anfänger, wie könnte das ungefähr gehen? Ein kleiner Anstoß-Codeschnipsel (bzw. wie nennt sich das alles, diese Funktionen) wäre echt nett, dann kann ich mir darüber mal Gedanken machen und googlen... Wäre nett =)

Unregistriert

Das wäre dann allerdings ohne Rubbeln, einfach nur mit einem Drauffahren, oder? Dann wäre HTML Imagemaps auf die einzelnen Flecken setzen und per Klick gehts auf die nächste Seite, wo der Fleck fehlt, einfacher, aber sinnvoller. EInmal drauf mit der Maus ist mir zu wenig.

synaptic

joa mit dem mousemove geht des zu schnell.. is mir aber auch grad eben erst aufgefallen...

hier haste ne codevorlage

HTML

<!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{
        height:240px;
        width:320px;
        background:url(beispielbild0.png);    
    }
    #rubbelbilder{
        height:240px;
        width:320px;
    }
    </style>

    <script type="text/javascript">
    var counter=0;
    var durchlauf=1;
    function rubbelbild(){
        var rubbel = document.getElementById('rubbelbilder');
        var layer = document.getElementById('bildlayer');
        if(counter<30){
              rubbel.src="rubbel"+counter+".png";
        }
        counter++;
        if(counter>=30 && durchlauf==1){
            alert("jetzt kommt das Nächste bild!");
            durchlauf++;
            layer.style.background = "url(beispielbild1.png)";
            counter=0;
            rubbel.src="rubbel"+counter+".png";
        }
    }



    </script>
</head>


<body>
<div id="bildlayer">
     <img src="rubbel0.png" id="rubbelbilder" onmouseover="rubbelbild()"/>
</div>


</body>
</html>

Alles anzeigen

so sieht dat dann aus: http://home.arcor.de/synaptic/js_rubbelbild/rubbelbild.html

halt mit mouseover gelöst (man muss also mit der maus über den bildrand hinweg
hier die zipfile: home.arcor.de/synaptic/js_rubbelbild/js_rubbelbild.zip

lukasn

Andere möglichkeit für die Bilder wäre auch, das Volle Bild als background zu nehmen und die wegzurubbelnde Abdeckung als PNG mit Tranparenz in einem IMG tag. Dadurch wäre es etwas simpler, verschiedene Bilder zu verwenden.

-Lukas

EDIT: Ich seh grad dass das synaptic ja auch so hat, my bad.

synaptic

hast du dir den code mal angesehen??

Zitat

<div id="bildlayer">
<img src="rubbel0.png" id="rubbelbilder" onmouseover="rubbelbild()"/>
</div>

Unregistriert

So, hallo.
Vielen Dank, toller Code. Werd ich mir dann so anpassen, danke, danke, danke =)

synaptic

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

und hier nochma ne php-variante...

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";
    }
    function writePic(){
    document.getElementById("bildlayer").style.background = "url( http://home.arcor.de/synaptic/js_rubbelbild/beispielbild0.png)"; 
    }
    </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>


</body>
</html>

Alles anzeigen

Unregistriert

Ich habs mal angepasst und der zeigt mir nur das freizurubbelnde Bild und nicht das Graue...

Unregistriert

Danke, PHP liegt mir mehr.. Ich versuchs mal =)

Unregistriert

Gibt es eine Möglichkeit, eine bestimmte Farbe von dem Grauschleier auszuschließen? Dass heißt, um zum T-Shirt zurückzukommen, ich habe ein blaues T-Shirt mit weißem Hintergrund. Jetzt möchte ich nur das T-Shirt freipixeln lassen, nicht auch den Hintergrund. Geht das?

synaptic

bestimmt..^^ es gibt ja bekanntlich nichts, was nicht geht...
aber da hab ich aktuelle keine lösung für parat..., da die einzelnen kleinen divs mit einer schleife über das bild geschrieben werden..
und der grauschleier ist letzlich die hintergrundfarbe der kleinen divs...
für die variante die du haben willst müssteste wohl eher die javascript-variante anpassen.. und mehr einzelbilder geben nen besseren rubbel-effekt!

oder lass dir das ganze via flash prgrammieren.. geht bestimmt auch besser.

Unregistriert

Ich mach das jetzt mit 12 kleinen 150x150 und background-image, nicht background-colour. Also 12 kleine Teile T-Shirt-sauber und 12 kleine Teile T-Shirt-dreckig. Also 12 dreckige Teile werden per drüberfahren zu 12 sauberen. Ich hoffe, ich kriege die so wieder nebeneinander *_* Sonst lass ichs halt bleiben...

Unregistriert

Hallo nochmal.. Kann man irgendwie einbauen, dass nach einer Zahl von freigelegten Pixel oder wenn das ganze Bild frei ist eine Nachricht 'super, toll hier dein preis' oder so erscheint? Wie müsste man die if-Abfrage formulieren? =?

synaptic

ja da musste jetzt genauer die bedingung formulieren...

Unregistriert

Wenn alle .grey - Kästchen .weg sind^^ Also, das gesamte Bild frei ist.

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">
    var durch = false;
    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");
    document.getElementById("control").innerHTML = alledivs.length;
        for(i=0; i< (alledivs.length-1); i++){
            if(alledivs[i].className=="weg"){
                divcount++;
            }
        }
        if(divcount==(alledivs.length-1) && !durch){
            alert("subi jutta, du hasset jepackt!")
        }
    }
    </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>
</body>
</html>

Alles anzeigen

Unregistriert

Das ist aber ein Pop-Up, oder? Ich werd mich mal schlau machen, geht das vielleicht auch als PHP-Echo-Artiges dings.. Ich will ja zum Beispiel auch einen Weiter-Button. Das geht im Pop-Up nicht. Aber ich schau selbst mal

synaptic

das is nen alert... da kannste jeden x-beliebigen code an der stelle einfügen, der die ausgabe macht..
viel erfolg dabei

Onmouseover, eine Art Rubbellos

Tags

Benutzer online in diesem Thema