Ergebnis 1 bis 9 von 9
  1. #1
    merls ist offline Jungspund
    registriert
    26-12-2001
    Beiträge
    10

    Table background change, per klick auf ein bild

    Hallo zusammen, ich komm einfach nicht weiter.

    Ich code grade ne kleine Seite fuer nen Frisbee Design Contest.

    Die Jungs erstellen Designs fuer ne Frisbee und ich wollte das ganze schoen auf ner kleinen Homepage anschaulich machen.

    Es geht mir darum das man sich das Design anschaun kann wie es direkt in einer Frisbee scheibe aussieht.

    so soll das aussehen:

    http://www.merls.de/frisbee/contest/frisbee.html

    wenn man nun auf eines der 100*100 Pixel grossen Bilder klickt
    soll dieses Bild als Hintergrund der mittleren Tabelle gesetzt werden. Die grosse weisse Frisbeescheibe ist als img in der mittleren Tabelle, hat ein Loch in der Mitte und ist Transparent so das der Hintergrund durchscheint.

    Sprich wenn ich das Hintergrundbild austausche scheint das jeweilige Design von hinten durch die Scheibe und sieht aus als wäre es auf die Scheibe aufgeklebt...

    Warum das ganze.. nunja weil die bilder eben nicht rund sind und bei vielen Fraben Gif's nunmal sehr pixelig werden...

    Hat irgend jemand von euch ne Idee wie ich das verwirklichen kann ohne für jedes Design ne eigene Seite machen zu muessen?
    denn bei 20 oder 30 designs wär das echt nen Haufen Arbeit

    ob php, javascript is mir dabei völlig egal...
    ich weiss echt nicht weiter
    Mfg
    Merls

  2. #2
    Avatar von .marc
    .marc ist offline Lebende Foren-Legende
    registriert
    26-12-2002
    Ort
    Schweiz / Biel
    Beiträge
    1.589
    versuch mal was in der Art, ist nicht getestet sollte aber gehen:
    Code:
    <script language="JavaScript">
    function change_bg(new_source,id)
    {
    	object=(document.all)?document.all[id]:document.getElementById(id);
    	object.style.backgroundImage=new_source;
    }
    
    /* Beispiel aufruf */
    change_bg("background.gif","tabellen_zellen_id"):
    </script>
    Shit doesn't happen, it's produced by an asshole.
    brain-dump.org || Marc Tanner's web log

  3. #3
    merls ist offline Jungspund
    registriert
    26-12-2001
    Beiträge
    10
    ok ich hab das script jetzt zerpflückt aber ich versteh nur bahnhof

    meinst du könntest das script mal mit den bildern von der homepage posten..

    und wie ich nen link gestalten muss damit der bg per klick auf das entsprechende bilder geändert wird?

    ich denke dann versteh ich es leichter... ich kann zwar html ganz gut aber sobald da java oder php mit drin is steh ich im wald

    vielen dank auf jedenfall schonmal für die Mühe die du dir gemacht hast
    Mfg
    Merls

  4. #4
    Avatar von .marc
    .marc ist offline Lebende Foren-Legende
    registriert
    26-12-2002
    Ort
    Schweiz / Biel
    Beiträge
    1.589
    hab dir hier kurz ein Beispiel gemacht, oben hats noch ein Fehler dirn gehabt.
    Code:
    <html>
    <head>
    <script language="JavaScript">
    function change_bg(new_source,id)
    {
    	object=(document.all)?document.all[id]:document.getElementById(id);
    	object.style.backgroundImage="url("+new_source+")";
    }
    </script>
    </head>
    <body>
    <table>
    <tr>
    	<td id="test" style="background-image:url(background.jpg);">blabla</td>
    </tr>
    </table>
    <a href="javascript:change_bg('background1.jpg','test')">änder 1</a>
    <a href="javascript:change_bg('background2.jpg','test')">ändern</a>
    </body>
    </html>
    der erste Parameter ist das neue Bild welches angezeigt werden sollte, der Zweite ist die Id der Tabellenzelle in der das Bild angezeigt werden soll (im Beispiel test).

    hoffe du hast es verstanden ansonsten fragen
    Shit doesn't happen, it's produced by an asshole.
    brain-dump.org || Marc Tanner's web log

  5. #5
    merls ist offline Jungspund
    registriert
    26-12-2001
    Beiträge
    10
    Hi marc,
    vielen Dank das du dir für nen Frischling wie mich soviel Mühe machst.

    Ich denke ich hab das Beispiel verstanden *gg* mal schaun ob ich fehlerfrei einbauen kann, werd dir das Ergebniss hier präsentieren, wenn man sieht das seine Tips erfolgreich eingebaut wurden freut man sich nämlich auch ein wenig

    http://frisbee.merls.de/frisbee.html

    funktioniert wunderbar aber ein kleiner Fehler war noch drin der mich fast zur Verzweiflung gebracht hat

    PHP-Code:
    <html>
    <
    head>
    <
    script language="JavaScript">
    function 
    change_bg(new_source,id)
    {
        
    object=(document.all)?document.all[id]:document.getElementById(id);
        
    object.style.backgroundImage="url("+new_source+")";
    }
    </script>
    </head>
    <body>
    <table>
    <tr>
        <td id="test" style="background-image:url(background.jpg);">blabla</td>
    </tr>
    </table>
    <a href="[COLOR=red]java script[/COLOR]:change_bg('background1.jpg','test')">änder 1</a>
    <a href="[COLOR=red]java script[/COLOR]:change_bg('background2.jpg','test')">ändern</a>
    </body>
    </html> 
    bis ich rausbekommen hab das man das javascript zusammenschreiben muss *lach*

    VIELEN VIELEN DANK, falls ich dir mal helfen kann sag bescheid
    Geändert von merls (08-07-2003 um 21:14 Uhr)
    Mfg
    Merls

  6. #6
    merls ist offline Jungspund
    registriert
    26-12-2001
    Beiträge
    10
    Hi ich bins nochmal, hab die Page fuer den Frisbee Design Contest nochmal komplett überarbeitet.

    Dein Script funktioniert sowas von geil ich bin super zufrieden damit... Solltest du mal als beispielscript für jswelt hochladen
    das kann man echt gut gebrauchen

    So und hier nochmal was aus deinem Script am Ende geworden ist

    http://frisbeecontest.merls.de
    Mfg
    Merls

  7. #7
    Avatar von .marc
    .marc ist offline Lebende Foren-Legende
    registriert
    26-12-2002
    Ort
    Schweiz / Biel
    Beiträge
    1.589
    aber ein kleiner Fehler war noch drin der mich fast zur Verzweiflung gebracht hat
    sorry ich wusste nicht das du nicht weisst, dass das Forum javascript: aus Sicherheitsgründen auseinanderschreibt
    freut mich das du es gebrauchen kannst aber für jswelt ist das glaub ich ein bisschen zu unspektakulär....
    Shit doesn't happen, it's produced by an asshole.
    brain-dump.org || Marc Tanner's web log

  8. #8
    merls ist offline Jungspund
    registriert
    26-12-2001
    Beiträge
    10
    ahso ne wusste ich nich das das forum das macht *lach*
    Aber hat ja geklappt...

    PS: auch wenn es unspektakulär is, es ist super praktisch und das find ich viel wichtiger als hochkomplexe scripts die man nur bedingt verwenden kann oder nur ganz speziell...

    das teil hier kann man so vielseitig verwenden...
    Naja musst du wissen.. genial is das es sogar frameübergreifen funktioniert
    Mfg
    Merls

  9. #9
    Avatar von .marc
    .marc ist offline Lebende Foren-Legende
    registriert
    26-12-2002
    Ort
    Schweiz / Biel
    Beiträge
    1.589
    also an mir solls nicht liegen wenn das Mo jswelt-würdig findet soll er es ruhig verwenden, wenn man es gebrauchen kann...
    Shit doesn't happen, it's produced by an asshole.
    brain-dump.org || Marc Tanner's web log

Lesezeichen

Berechtigungen

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