• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Table background change, per klick auf ein bild

M

merls

New member
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 :(
 
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>
 
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
 
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 :)
 
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: 
<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 :)
 
Zuletzt bearbeitet:
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
 
aber ein kleiner Fehler war noch drin der mich fast zur Verzweiflung gebracht hat
Zum Vergrößern anklicken....
sorry ich wusste nicht das du nicht weisst, dass das Forum javascript: aus Sicherheitsgründen auseinanderschreibt :D
freut mich das du es gebrauchen kannst aber für jswelt ist das glaub ich ein bisschen zu unspektakulär....
 
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 :)
 
also an mir solls nicht liegen wenn das Mo jswelt-würdig findet soll er es ruhig verwenden, wenn man es gebrauchen kann...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben