Hintergrundbild onklick erscheinen lassen

  • Themenstarter Themenstarter mazax
  • Beginndatum Beginndatum
M

mazax

hi leute,

habe hier im forum ein sehr gutes script gefunden, um das Hintergrundbild onklick zu ändern. eines stört mich allerdings: der wechsel ist zu hart. ich will das die bilder onklick langsam erscheinen (effect.appear?!).

FRAGE: was muss ich ergänzen und wo füge ich das ein? (bin kein crack)

hier der ganze code:

.................................
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function swapBackground(strImg) {
document.getElementById('body').style.backgroundImage = "url("+strImg+")";
}
//-->
</script>
<style type="text/css">
<!--
body{
background: url(bild0.jpg) 0 0 no-repeat;
}
//-->
</style>
</head>
<body id="body">
<a href="#" onmouseover="swapBackground('bild1.jpg');" onmouseout="swapBackground('bild0.jpg');">link 1</a>
<a href="#" onmouseover="swapBackground('bild2.jpg');" onmouseout="swapBackground('bild0.jpg');">link 2</a>
</body>
</html>
.................................

danke im voraus.
 
Zweierlei Sachen dazu:
1) Könntest du bitte deinen Quelltext in die entsprechenden BB-Tags setzen, damit er als solcher formatiert angezeigt wird?
2) Du kannst dir entweder diesen Effekt selber programmieren oder du nutzt ein entsprechendes Framework wie jQuery, da solch ein Verhalten mit den Grundfunktionen von Javascript nicht möglich ist.
 
einfach nur crack hat gesagt.:
Zweierlei Sachen dazu:
1) Könntest du bitte deinen Quelltext in die entsprechenden BB-Tags setzen, damit er als solcher formatiert angezeigt wird?
2) Du kannst dir entweder diesen Effekt selber programmieren oder du nutzt ein entsprechendes Framework wie jQuery, da solch ein Verhalten mit den Grundfunktionen von Javascript nicht möglich ist.
Zum Vergrößern anklicken....

---
hi,

1. danke für die antwort.
2. kann nichts damit anfangen:-)

zu 1: weiß nicht was bb-tags sind
zu 2: auf die idee mit jquery kam ich auch:
http://wiki.github.com/madrobby/scriptaculous/effect-appear
aber ich weiß nicht wo ich das ganze einfügen muss, damit es ****t.

gruß. m.
 
Zu den BB-Tags: einfach deinen Code zwischen [ PHP ] und [ /PHP ] setzen (Leerzeichen natürlich aus den Tags entfernen).

Zum Einbinden: Weißt du, wie man Javascript-Dateien in eine HTML-Seite einbindet?
 
@einfach nur crack

zum einbinden von js kenne ich zwei möglichkeiten:
entweder im headbereich des html-dokuments
oder als text.js auf dem server mit einem verweis im head des html-dokuments. mein eigentliches layout ist auch so aufgebaut. ich verwende nämlich noch ein accordion für meinen Inhalt.
 
Hallo,

was mich ziemlich verwirrt, dass im ersten Beitrag über den Austausch eines Hintergrundbildes gesprochen wird und im weiteren Verlauf dieses Threads nie wieder.

Wenn es wirklich um Hintergrundbilder geht, dann würde ich auf den FF4 und den IE9 warten und CSS3 benutzen, so wie es hier gemacht wird: Fading Button Background Images With CSS3 Transitions.

Ansonsten wird hier im Forum gezeigt, dass man "mit den Grundfunktionen von Javascript" zwischen dem Vordergrund- und dem Hintergrundbild faden kann.
 
@hela

den austausch des hintergrundes bekomme ich ja, wie bereits erwähnt, gut hin. mir geht es nur darum, dass der wechsel zu hart ist. ich will es einfach smooth haben:-)
kurz gesagt: das nötige script für den hintergrundbild-wechsel habe ich. was muss ich ergänzen (und an welcher stelle) damit dieser wechsel weich geschieht?

mit jquery scheint das ja zu gehen, aber wie kombiniere ich das mit meinem HGB-wechsel-script?
 
mazax hat gesagt.:
... den austausch des hintergrundes bekomme ich ja, wie bereits erwähnt, gut hin. mir geht es nur darum, dass der wechsel zu hart ist. ich will es einfach smooth haben:-)
kurz gesagt: das nötige script für den hintergrundbild-wechsel habe ich...
Zum Vergrößern anklicken....
Mit CSS2 kann man nur 1 Hintergrundbild deklarieren. Daher ist damit auch ein "weicher" Übergang zwischen zwei Hintergrundbildern nicht möglich. Mit CSS3 sieht das schon anders aus, allerdings unterstützen Firefox und der Internet-Explorer den "weichen" (CSS3-)Übergang noch nicht. Vielleicht lässt sich da was mit jQuery machen, das überblicke ich aber nicht.

Allerdings kann man mit CSS2-Mitteln auch in einem DIV-Block ein IMG-Element als Vordergrundbild und zusätzlich noch ein Hintergrundbild unterbringen. Wenn das Hintergrundbild vollständig vom Vordergrundbild abgedeckt wird und man hier die Transparenz ändert, dann kann man einen "weichen" Bildübergang erreichen (siehe o.g. Link).

mazax hat gesagt.:
... mit jquery scheint das ja zu gehen, ...
Zum Vergrößern anklicken....
Ja, würde mich auch interessieren ob es nur so scheint.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück