tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
10
ZUGRIFFE
1060
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 09.11.06 13:14 #1
    Marc_CH_ Marc_CH_ ist offline Grünschnabel
    Registriert seit
    Nov 2006
    Beiträge
    3
    hallo

    Ich hab folgendes Problem:

    Ich habe einen Ordner "bilder" der eine Anzahl an bilder enthält. In diesem Ordner befindet sich ein weiterer Ordner "thumbs" der die Thumbnails der Bilder enthält. Jetzt hab ich folgendes gemacht.
    Oben auf der Seite werden alle Thumbnails aufgelistet und darunter befindet sich ein Bereich der 400px mal 300px gross ist. Wenn ich jetzt jeweils auf ein Thumbnail klicke, wird das Bild im grossen Bereich dargestellt. Das Funktioniert im FF und Opera alles Bestens, nur im IE gehts nicht. Wenn ich dort auf ein Thumbnail klicke, zeigt er mir im grossen Bereich nur eine weisse Fläche (resp. nichts) an.

    hier mein code:

    html
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    <!--xml version="1.0" encoding="utf-8"-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http:www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <title>Test</title>
        <script type="text/javascript" src="test.js"></script>
    </head>
    <body>
        <a href="javascript:;"><img src="http://localhost/ajax/test/img/thumb/1.jpg" onclick="changeImage(this);"></a>
        <a href="javascript:;"><img src="http://localhost/ajax/test/img/thumb/2.jpg" onclick="changeImage(this);"></a>
        <a href="javascript:;"><img src="http://localhost/ajax/test/img/thumb/3.jpg" onclick="changeImage(this);"></a>
        <a href="javascript:;"><img src="http://localhost/ajax/test/img/thumb/4.jpg" onclick="changeImage(this);"></a>
        <a href="javascript:;"><img src="http://localhost/ajax/test/img/thumb/5.jpg" onclick="changeImage(this);"></a>
        <div id="bigImage" style="border: 1px solid black;"><img src="" /></div>
    </body>
</html>

    javascript
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13

    window.onload = function() {
    document.getElementById("bigImage").firstChild.setAttribute(
        "src",
        document.body.getElementsByTagName("a")[0].firstChild.src.replace("/thumb", "")
    );
}
 
function changeImage(img) {
    document.getElementById("bigImage").firstChild.setAttribute(
        "src",
        img.src.replace("/thumb", "")
    );
}

    warum funktioniert das im IE nicht? hab echt keinen plan mehr! hab schon so viel versucht, aber es nützt alles nichts...

    danke für eure hilfe!
     
    Zitieren Zitieren
  2. 09.11.06 14:52 #2
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    Hi,

    entferne mal das javascript: ; in den href-Attributen.

    Aus
    Code :
    1

    <a href="javascript:;">
    wird
    Code :
    1

    <a href="#">
    Ciao
    Quaese
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
    Zitieren Zitieren
  3. 09.11.06 15:23 #3
    Marc_CH_ Marc_CH_ ist offline Grünschnabel
    Registriert seit
    Nov 2006
    Beiträge
    3
    danke. ja jetzt gehts . aber nun springt er allerfdings bei jedem klick an den anfang der seite zurück. wie kann man das verhindern (ausser mit "javascript:;")?
     
    Zitieren Zitieren
  4. 09.11.06 16:09 #4
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    Hi,

    versuch mal in Deiner Funktion false zurück zu geben. Diesen Wert reichst Du dann weiter an den A-Tag.

    Code :
    1
2
3
4
5
6
7

    function changeImage(img) {
  document.getElementById("bigImage").firstChild.setAttribute(
    "src",
    img.src.replace("/thumb", "")
  );
  return false;
}
    Die Links werden folgendermassen angepasst:
    Code :
    1

    <a href="#"><img src="http://localhost/ajax/test/img/thumb/5.jpg" onclick="[B]return [/B]changeImage(this);"></a>
    Ciao
    Quaese
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
    Zitieren Zitieren
  5. 09.11.06 16:19 #5
    Marc_CH_ Marc_CH_ ist offline Grünschnabel
    Registriert seit
    Nov 2006
    Beiträge
    3
    geil es funktioniert. kannst du mir auch noch erklären warum das so geht?
     
    Zitieren Zitieren
  6. 05.07.07 22:57 #6
    Merbi Tutorials.de Gastzugang
    Das Script finde ich interessant.

    Könnte es gut gebrauchen aber würde ohne Thumbs arbeiten sondern mit Links wasmüsste ich dann verändern und wohin kommt das javascript.

    HAbe noch nie damit gearbeitet.

    MFG Daniel
     
    Zitieren Zitieren
  7. 06.07.07 09:59 #7
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    Hi,

    die Funktionsaufrufe platzierst Du im A-Tag. Allerdings kannst Du jetzt nicht mehr this übergeben. Stattdessen
    ist es möglich, die Funktion mit dem Namen der Bilddatei aufzurufen.

    Mein Vorschlag:
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

    <html>
<head>
<title>Test</title>
<script type="text/javascript">
// Verzeichnis mit den Bilddateien
var strImgPath = "http://localhost/ajax/test/img/";
 
function changeImage(strImg) {
  document.getElementById("bigImage").firstChild.setAttribute(
    "src",
    (strImgPath + strImg)
  );
  return false;
}
</script>
</head>
<body>
  <a href="#" onclick="return changeImage('bild1.jpg');">Bild 1</a>
  <a href="#" onclick="return changeImage('bild2.jpg');">Bild 2</a>
  <a href="#" onclick="return changeImage('bild3.jpg');">Bild 3</a>
  <div id="bigImage" style="border: 1px solid black;"><img src="" /></div>
</body>
</html>
    Ciao
    Quaese
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
    Zitieren Zitieren
  8. 06.07.07 10:41 #8
    Avatar von Michael Engel
    Michael Engel Michael Engel ist offline
    Registriert seit
    May 2007
    Ort
    Köln / Bonn
    Beiträge
    844
    Blog-Einträge
    4
    Zitat Zitat von Marc_CH_ Beitrag anzeigen
    geil es funktioniert. kannst du mir auch noch erklären warum das so geht?
    Return wird dazu verwendet das Funktionen Sachen zurückliefern, false bedeuted unwahr. Meist wird ein Return false dazu verwendet um auszudrücken das in der funktion was falsch gelaufen ist. Nach einem Return innerhalb einer funktion wird sofort abgebrochen und nichts weiter ausgeführt was darunter steht.

    Hier wird es dazu verwendet dem Browser sozusagen zu sagen das die weitere skriptausführung des links abgebrochen wird. Sprich ein link wo nur return false; drinsteht macht garnix wenn man draufklickt und der browser javascript unterstüzt
     
    Der Computer ist die logische Weiterentwicklung des Menschen: Intelligenz ohne Moral.
    Zitieren Zitieren
  9. 22.07.07 20:37 #9
    Merbi Tutorials.de Gastzugang
    Guten Abend allerseits,

    Habe das jetzt eingebaut und fertig nur ist im IE ist dann da am Anfang dieses rote Kreuz wenn noch kein Bild ausgewählt wurde als ob ein Bild nicht vorhanden ist.

    Jetzt habe ich mir gedacht wäre es ja sinnig wenn man programmiert das am Anfang bevor ein Bild angeklickt wurde da ein bestimmtes Startbild ist (oder wenn es geht auch ein php dokument),

    Nur wie ist die Frage.

    MFG Daniel
     
    Zitieren Zitieren
  10. 22.07.07 20:49 #10
    Maik Tutorials.de Gastzugang
    Hi!
    Zitat Zitat von KingOfRap Beitrag anzeigen
    Habe das jetzt eingebaut und fertig nur ist im IE ist dann da am Anfang dieses rote Kreuz wenn noch kein Bild ausgewählt wurde als ob ein Bild nicht vorhanden ist.

    Jetzt habe ich mir gedacht wäre es ja sinnig wenn man programmiert das am Anfang bevor ein Bild angeklickt wurde da ein bestimmtes Startbild ist
    Kann es sein, dass du diese Zeile in deinem Dokument stehen, und vergessen hast, im src-Attribut die Grafik-URI anzugeben?

    Code :
    1

    <div id="bigImage" style="border: 1px solid black;"><img src="[color=red]wohin_geht_denn_die_reise?[/color]" /></div>
    Dann wird vom IE auch kein rotes Kreuz angezeigt, und das Dokument besitzt das Startbild, das mit dem Script getauscht werden kann.

    Somit muss da auch nichts mehr programmiert werden, damit beim Dokumentaufruf ein Startbild vorhanden ist.
     
    Zitieren Zitieren
  11. 22.07.07 21:24 #11
    Merbi Tutorials.de Gastzugang
    Hi,

    sry.

    Wie dämlich von mir

    MFG Daniel
     
    Zitieren Zitieren
« Bild bei Click vergrößern | Checkbox »

Ähnliche Themen

  1. *Aussagekräftiger Titel* Wechseln in Verzeichniss dynamisch
    Von Campl3r im Forum PHP
    Antworten: 4
    Letzter Beitrag: 03.01.11, 21:23
  2. Dynamisch zwischen php4 und php5 wechseln
    Von Buba235 im Forum PHP
    Antworten: 8
    Letzter Beitrag: 16.06.07, 05:09
  3. Bilder dynamisch wechseln?
    Von aTa im Forum PHP
    Antworten: 10
    Letzter Beitrag: 22.08.05, 10:31
  4. Bilder wechseln
    Von Canada im Forum Flash Plattform
    Antworten: 1
    Letzter Beitrag: 22.06.04, 05:25
  5. <td> CSS Class dynamisch wechseln
    Von Lyxatros im Forum Javascript & Ajax
    Antworten: 3
    Letzter Beitrag: 23.09.02, 23:25