Seite 1 von 3 123 LetzteLetzte
Ergebnis 1 bis 10 von 23

Thema: Onmouseover, eine Art Rubbellos

  1. #1
    Unregistriert
    Gast

    Standard Onmouseover, eine Art Rubbellos

    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?
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Onmouseover, eine Art Rubbellos

    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)
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  3. #3
    Unregistriert
    Gast

    Standard AW: Onmouseover, eine Art Rubbellos

    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 =)

  4. #4
    Unregistriert
    Gast

    Standard AW: Onmouseover, eine Art Rubbellos

    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.

  5. #5
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Onmouseover, eine Art Rubbellos

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

    hier haste ne codevorlage
    HTML-Code:
    <!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>
    
    so sieht dat dann aus: http://home.arcor.de/synaptic/js_rub...ubbelbild.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
    Geändert von synaptic (01.02.2009 um 21:47 Uhr)
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  6. #6
    Meister(in) Avatar von lukasn
    Registriert seit
    23.02.2008
    Ort
    Schweiz
    Alter
    27
    Beiträge
    491
    Danke
    2
    Bekam 12 mal "Danke" in 11 Postings

    Standard AW: Onmouseover, eine Art Rubbellos

    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.

  7. #7
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Onmouseover, eine Art Rubbellos

    hast du dir den code mal angesehen??
    <div id="bildlayer">
    <img src="rubbel0.png" id="rubbelbilder" onmouseover="rubbelbild()"/>
    </div>
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  8. #8
    Unregistriert
    Gast

    Standard AW: Onmouseover, eine Art Rubbellos

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

  9. #9
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Onmouseover, eine Art Rubbellos

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

    und hier nochma ne php-variante...

    PHP-Code:
    <!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>
    Geändert von synaptic (02.02.2009 um 15:56 Uhr)
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  10. #10
    Unregistriert
    Gast

    Standard AW: Onmouseover, eine Art Rubbellos

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

Ähnliche Themen

  1. onmouseover
    Von Raziel im Forum HTML & CSS Forum
    Antworten: 13
    Letzter Beitrag: 13.06.2007, 18:14
  2. onMouseover
    Von kloppy1123 im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 28.04.2007, 14:16
  3. onmouseover
    Von gelöschter User im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 22.12.2005, 21:30
  4. OnMouseOver
    Von J!M! im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 09.08.2005, 13:58
  5. CSS -> onmouseover?
    Von T0b3 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 7
    Letzter Beitrag: 22.12.2004, 17:12

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •