Grafiken mit IF-ELSE-Anweisung tauschen
DerEineDa
- javascript
Also, ich habe folgendes Problem:
Ich habe ein Bild in meine Seite eingefügt:
<img src="1.jpg name="pic">
Nun habe ich ein 2. Bild, das 2.jpg heißt. Ich möchte nun, dass das erste Bild gegen das zweite ausgetauscht wird, sobald man draufklickt. Das versuche ich mit Hilfe einer Funktion zu erreichen, in der ich eine IF-ELSE-Anweisung eingefügt habe. Hier mein Code:
<html>
<head>
<script type="text/javascript">
<!--
function picchange() {
if(document.pic.src = "1.jpg") {
document.pic.src="2.jpg";
}
else
document.pic.src="1.jpg";
}
-->
</script>
</head>
<body>
<img src="1.jpg" name="pic" onClick="picchange();">
</body>
</html>
Wenn ich einmal auf das Bild klicke wird wie geplant das 2. geladen, aber wenn ich nochmal draufklicke, dann passiert gar nichts mehr, obwohl ich möchte, dass wieder das 1. Bild erscheint. Wo liegt mein Fehler?
Vielen Dank im voraus!
Hallo.
if(document.pic.src = "1.jpg") {
^
http://selfhtml.teamone.de/javascript/sprache/operatoren.htm#vergleich
Aber versuch mal das, is einfacher:
<html><head><title></title>
<script type="text/javascript">
<!--
bild1 = new Image(); bild1.src = "http://selfhtml.teamone.de/grafik/anzeige/thumbnails/thumb3.jpg";
bild2 = new Image(); bild2.src = "http://selfhtml.teamone.de/grafik/anzeige/thumbnails/thumb4.jpg";
function tauschen()
{
document.bild.src = (document.bild.src == bild1.src) ? bild2.src : bild1.src;
}
//-->
</script>
</head><body>
<a href="javascript:tauschen()"><img src="http://selfhtml.teamone.de/grafik/anzeige/thumbnails/thumb3.jpg" alt="Klick mich!" name="bild" border="0"></a>
</body></html>
Gruß
Norbert
if(document.pic.src = "1.jpg") {
^
Da ich etwas C++ beherrsche, habe ich mir schon fast gedacht, dass da ein "==" hingehört. Allerdings funktionierte meine Methode dann gar nicht mehr, also habe ich es durch ein normales "=" ersetzt, so funktioniert es wenigstens zur Hälfte (das Bild wird also einmal gewechselt).
Finde ich ja sehr nett, dass du mir diese andere Möglichkeit gezeigt hast, aber ich bin nunmal so stur und möchte es mit meiner eigenen Methode schaffen ;)
Wäre also nett, wenn mir trotzdem jemand sagen könnte, wo bei meiner Methode der Fehler liegt.
@Norbert: Aber trotzdem danke!
Hallo.
if(document.pic.src = "1.jpg") {
^
Da ich etwas C++ beherrsche, habe ich mir schon fast gedacht, dass da ein "==" hingehört. Allerdings funktionierte meine Methode dann gar nicht mehr, also habe ich es durch ein normales "=" ersetzt, so funktioniert es wenigstens zur Hälfte (das Bild wird also einmal gewechselt).
Das ist aber nur so, weil dann anstatt der if-Abfrage document.pic.src der Wert "1.jpg" zugewiesen wird.
Finde ich ja sehr nett, dass du mir diese andere Möglichkeit gezeigt hast, aber ich bin nunmal so stur und möchte es mit meiner eigenen Methode schaffen ;)
Naja, du kannst dich ja ein bissel dran orientieren.
Wäre also nett, wenn mir trotzdem jemand sagen könnte, wo bei meiner Methode der Fehler liegt.
Das Problem sollte sichtbar werden, wenn du in deiner Funktion vor der if-Abfrage einfach mal window.alert(document.pic.src) einfügst.
@Norbert: Aber trotzdem danke!
Bidde, bidde.
Gruß
Norbert
Sorry, ich glaube ich bin zu blöd dazu :)
Gegen eine eindeutigere Antwort hätte ich nichts einzuwenden..
Danke
Hallo.
Gegen eine eindeutigere Antwort hätte ich nichts einzuwenden..
Also, du vergleichst document.pic.src mit dem Dateinamen des Bildes, das Problem daran ist jedoch, dass document.pic.src nich nur den Dateinamen, sondern auch den Pfadnamen un son Schnick-Schnack enthält, d.h. du vergleichst 1.jpg mit sowas wie http://blubber.bl/ub/1.jpg, und das ist _nich_ das selbe. Deshalb empfiehlt sich hierbei auch das image-Objekt mehr auszureizen (http://selfhtml.teamone.de/javascript/objekte/images.htm#allgemeines, bzw. http://selfhtml.teamone.de/javascript/objekte/images.htm#src).
Gruß
Norbert