Seite 1 von 3 123 LetzteLetzte
Ergebnis 1 bis 15 von 45
  1. #1
    maggie ist offline Mitglied
    registriert
    26-09-2005
    Beiträge
    40

    Navigation zum Bildwechsel

    Hallo, als JS-Einsteiger möchte ich ein Bildwechseln-Script schreiben. 3 Navigationsquadrate, sollen den Bildwechsel steuern u. anzeigen welches Bild aktiv ist. Bisher habe ich den Zustand des img bei hover (z.B. Border) über CSS geregelt aber ich möchte auch anzeigen (z.B. rotes Quadrat) wenn das Bild1 gezeigt wird.
    Code:
    var namen=new Array("bild1.jpg","bild2.jpg","bild3.jpg");
    var bild=new Array();
    function lade()
    {
      var i;                    
      for (i=0;i<5;i++)          
      {
        bild[i]=new Image();  
        bild[i].src=namen[i]; 
      }
    }
    function zeige(nr)
    {
      document.images[0].src=bild[nr].src;
    }
    HTML-Code:
    <div id="bildbox">
    <img src="bild1.jpg" width="400" height="300">
    <div id="bildnavibox">
    <img src="pixel.gif" width="15" height="15" onClick="zeige(1)">
    Könnt Ihr mir einen Tipp geben, wie ich die Navigation (1Quadrat für jedes große Bild) in das Script einbinden muss.
    Gruß
    Maggie

  2. #2
    ToM80 ist offline Foren-Gott
    registriert
    27-03-2006
    Ort
    Neuss
    Beiträge
    2.729

    AW: Navigation zum Bildwechsel

    Ich verstehe deine Aussage leider nicht ganz. Was für ein Quadrat?
    Möchtest du dass die Bilder als Vorschaubilder erscheinen und das aktuelle dann einen roten Rahmen hat?

  3. #3
    maggie ist offline Mitglied
    registriert
    26-09-2005
    Beiträge
    40

    AW: Navigation zum Bildwechsel

    <Ich verstehe deine Aussage leider nicht ganz. Was für ein Quadrat?
    Möchtest du dass die Bilder als Vorschaubilder erscheinen und das aktuelle dann einen roten Rahmen hat?>
    Sorry, habe mich wohl umständlich ausgedrückt :-(
    z.B. In einem 'div' Container soll ein großes Bilder angezeigt werden. In einem anderen 'div' Container sind 3 kl. weiße Quadrate (jedes Quadrate steht für ein gr. Bild). Klickt man das 3. Quadrat an, soll die Farbe des Quadrats wechseln und das 3. große Bild (im div Container für die gr. Bilder) angezeigt werden. usw.
    Gruß
    Maggie

  4. #4
    maggie ist offline Mitglied
    registriert
    26-09-2005
    Beiträge
    40

    AW: Navigation zum Bildwechsel

    Kann mir jemand einen Tipp geben?
    Gruß
    Maggie

  5. #5
    ToM80 ist offline Foren-Gott
    registriert
    27-03-2006
    Ort
    Neuss
    Beiträge
    2.729

    AW: Navigation zum Bildwechsel

    Aso, sag das doch gleich ;-)
    Ist im Prinzip ganz einfach.
    Du kannst hier mit IDs in den DIVsarbeiten und diese mit
    Code:
    document.getElementById('wasAuchImmerID')
    ansprechen um dann die Eigenschaften zu ändern.

    JS:
    PHP-Code:
    <script type="text/javascript">
    //BILDARRAYS
    var bilder=newArray();
    bilder[]="not in Use";
    bilder[]="pics/bild1.jpg";
    bilder[]="pics/bild2.jpg";
    bilder[]="pics/bild3.jpg";

    function 
    chgImg(no) {
       
    document.getElementById('imgBild').src=bilder[no];
       for (var 
    x=1;x<4;x++) {
         
    document.getElementById('quadrat'+x).style.backgroundColor='#fff';
       }
       
    document.getElementById('quadrat'+no).style.backgroundColor='#f00';
    }
    </script> 
    HTML-Script:
    Code:
    <div id="imgHolder">
      <img src="pics/bild1.jpg" />
    </div>
    <div id="quadrat1" onclick="chgImg(1);"></div><div id="quadrat2" onclick="chgImg(2);"></div><div id="quadrat3" onclick="chgImg(3);"></div>
    That's all. Jetzt musst du nur noch die DIVs mittels CSS anpassen ;-)
    Quadrat1 ist beim Laden bereits rot, die anderen beiden weiß.

  6. #6
    maggie ist offline Mitglied
    registriert
    26-09-2005
    Beiträge
    40

    AW: Navigation zum Bildwechsel

    Hi ToM80, danke erstmal!
    So ganz komme ich noch nicht mit - obwohl es so einfach aussieht :-(
    Müssten die rot markierten id nicht gleich sein?
    Code:
    function chgImg(no) {
       document.getElementById('imgBild').src=bilder[no];
       for (var x=1;x<4;x++)
    HTML-Script:
    Code:
    <div id="imgHolder">
      <img src="pics/bild1.jpg" />
    </div>
    In der .css Datei habe ich das 1. Naviquadrat so beschrieben.
    Code:
    #quadrat1{
    	width: 15px;
      	height: 15px;
      	border: solid 1px #CCCCCC;
      	margin: 0 0 0 3px;
    	}
    Wie kann ich einen hover effekt ansprechen?
    Gruß
    Maggie

  7. #7
    ToM80 ist offline Foren-Gott
    registriert
    27-03-2006
    Ort
    Neuss
    Beiträge
    2.729

    AW: Navigation zum Bildwechsel

    Sry hatte was vergessen. Die ID "imgBild" bezieht sich natürlich auf den IMG-Tag ;-)
    Code:
    <div id="imgHolder">
      <img src="pics/bild1.jpg" id="imgBild" />
    </div>
    Hover geht bei Divs genauso wie bei anderen Elementen:
    z. B.
    Code:
    #quadrat1:hover {
      background-color: #f60;
      border: 1px solid #006;
    }
    Edit:
    Wenn alle Quadrate gleich aussehen sollen, ist es einfacher wenn du im CSS über die ID (#qu...) nur die Lage bestimmst und den Quadraten dann noch eine Klasse anlegst.
    Code:
    #quadrat1 {
      position: relative;
      top: 0px;
      left: 5px;
      float: left;
    }
    .quadrat {
      width: 15px;
      height: 15px;
      margin: 0 0 0 3px;
      border: solid 1px #CCCCCC;
      background-color: #fff;
    }
    .quadrat:hover {
      border: solid 1px #006;
      background-color: #f60;
    }
    Geändert von ToM80 (01-10-2008 um 10:29 Uhr)

  8. #8
    maggie ist offline Mitglied
    registriert
    26-09-2005
    Beiträge
    40

    AW: Navigation zum Bildwechsel

    Danke für Deine Mühe!
    Es klappt nicht :-( Kann ich nicht mal abschreiben?
    HTML-Code:
    [CODE]
    <script language="JavaScript" type="text/JavaScript">
    <!--
    //Bilder liegen auf der selben Ebene wie die html in der das js liegt
    var bilder=newArray();
    bilder[]="not in Use";
    bilder[]="bild1.jpg";
    bilder[]="bild2.jpg";
    bilder[]="bild3.jpg";
    
    function chgImg(no) {
       document.getElementById('imgBild').src=bilder[no];
       for (var x=1;x<4;x++) {
         document.getElementById('quadrat'+x).style.backgroundColor='#fff';
       }
       document.getElementById('quadrat'+no).style.backgroundColor='#f00';
    }
    //-->
    </script>[/CODE]
    <div id="bildbox">
    	 <img src="bild1.jpg" id="imgBild" />
    		<div id="bildnavibox">
    			<div id="quadrat1" class="quadrat" onClick="chgImg(1);"></div>
    			<div id="quadrat2" class="quadrat" onClick="chgImg(2);"></div>
    			<div id="quadrat3" class="quadrat" onClick="chgImg(3);"></div>
    		</div>
    	  </div> 
    Code:
    #quadrat1 {
      position: relative;
      top: 0px;
      left: 5px;
    }
    .quadrat {
      width: 15px;
      height: 15px;
      margin: 0 0 0 3px;
      border: solid 1px #CCCCCC;
      background-color: #fff;
    }
    .quadrat:hover {
      border: solid 1px #006;
      background-color: #f60;
    }
    #quadrat2 {
      position: relative;
      top: 0px;
      left: 25px;
    }
    #quadrat3 {
      position: relative;
      top: 0px;
      left: 45px;
    }

  9. #9
    ToM80 ist offline Foren-Gott
    registriert
    27-03-2006
    Ort
    Neuss
    Beiträge
    2.729

    AW: Navigation zum Bildwechsel

    Ja und nein ;-)
    new Array() bitte getrennt schreiben. Aber ich hatte auch einen Fehler. Ich hab PHP mal wieder mit JS verwechselt. Du musst den Elementen noch die ID mitgeben.
    PHP-Code:
    var bilder=new Array();
    bilder[1]="bild1.jpg";
    bilder[2]="bild2.jpg";
    bilder[3]="bild3.jpg"
    Wenn du deine Quadrate tatsächlich "relative" positionieren willst, brauchst du dass nur in der Klasse mitgeben.

    Code:
    <style type="text/css">
    #bildbox {
    	positon: absolute;
    	top: 20px;
    	left: 20px;
    	width: 100px;
    	height: 200px;
    	line-height: 200px;
    	text-align: center;
    }
    #bildnavibox {
    	positon: absolute;
    	top: 240px;
    	left: 20px;
    	width: 100px;
    	height: 20px;
    	line-height: 20px;
    	text-align: center;
    }
    .quadrat {
      width: 15px;
      height: 15px;
      margin: 0 0 0 3px;
      border: solid 1px #CCCCCC;
      background-color: #fff;
      position: relative;
      top: 0px;
      left: 5px;
      float: left;
    }
    #quadrat1:hover {
      border: solid 1px #006;
      background-color: #f60;
    }
    #quadrat2:hover {
      border: solid 1px #006;
      background-color: #f60;
    }
    #quadrat3:hover {
      border: solid 1px #006;
      background-color: #f60;
    }
    </style>
    Das Hover muss man tatsächlich für jede ID einzeln machen, dann funktioniert es.
    Geändert von ToM80 (01-10-2008 um 12:31 Uhr)

  10. #10
    maggie ist offline Mitglied
    registriert
    26-09-2005
    Beiträge
    40

    AW: Navigation zum Bildwechsel

    Super! Danke ToM80!
    Ein Problemchen habe ich noch, und zwar sollte die Starteinstellung so sein, dass das Navigationsquadrat als aktiv markiert ist, da das bild1 ja sichtbar ist. Muss ich dazu eine neue Variable anlegen?
    Code:
    bilder[0]="bild1.jpg";
    (var y=0;)
    document.getElementById('quadrat'+y).style.backgroundColor='#fff';
    ...kannst Du mir noch ein JavaScript Tutorial empfehlen.
    Gruß
    Maggie

  11. #11
    ToM80 ist offline Foren-Gott
    registriert
    27-03-2006
    Ort
    Neuss
    Beiträge
    2.729

    AW: Navigation zum Bildwechsel

    Nein, keine neue Variable. Ich denke mal du nimmst eines der 3 Bilder her. Also trägst du dieses ganz normal in das IMG-Tag bei src="" ein.

    Ausserdem vergibst du dem 1. Quadrat, z. B. mittels inline-Style die Farbe rot.
    Code:
    <div id="quadrat1" class="quadrat" style="background-color: #f00;"></div>
    Ein Tutorial kenne ich leider nicht. Aber unter
    SELFHTML 8.1.2 (HTML-Dateien selbst erstellen)
    kannst du viel lernen.
    Ausserdem gibt es noch sogenannte "Openbooks", also Bücher, die kostenlos Online zur Verfügung gestellt werden.
    Z. B. Galileo Computing :: JavaScript und AJAX

    Und ansonsten einfach wieder hierher kommen und nachhaken ;-)

  12. #12
    maggie ist offline Mitglied
    registriert
    26-09-2005
    Beiträge
    40

    AW: Navigation zum Bildwechsel

    Herzlichen Dank!

    Ausserdem vergibst du dem 1. Quadrat, z. B. mittels inline-Style die Farbe rot.
    ...auf diese Idee wäre ich nicht gekommen.

    Schönen Tag!
    Maggie

  13. #13
    ToM80 ist offline Foren-Gott
    registriert
    27-03-2006
    Ort
    Neuss
    Beiträge
    2.729

    AW: Navigation zum Bildwechsel

    Zitat Zitat von maggie Beitrag anzeigen
    Herzlichen Dank!
    Nix für, gern geschehen

    Zitat Zitat von maggie Beitrag anzeigen
    Schönen Tag!
    Danke dir auch

  14. #14
    maggie ist offline Mitglied
    registriert
    26-09-2005
    Beiträge
    40

    AW: Navigation zum Bildwechsel

    ... es macht Spaß, hab ein bisschen rumgespielt und erfolgreich die Variante hinbekommen, dass das aktive Quadrat verschwindet (weiß wird).

    Code:
    function chgImg(no) {
       document.getElementById('imgBild').src=bilder[no];
       for (var x=1;x<5;x++) {
         document.getElementById('quadrat'+x).style.backgroundColor='#FFFFFF';
    	 document.getElementById('quadrat'+x).style.border ='solid #999999 1px';
    	 }
       document.getElementById('quadrat'+no).style.backgroundColor='#FFFFFF';
       document.getElementById('quadrat'+no).style.border='none';
       }
    Der hover Effekt funktioniert über die CSS jedoch nur beim Start.
    Code:
    #quadrat1:hover {
       background-color: #999999;
    }
    Wenn einmal angeklickt wurde wirkt das CSS nicht mehr.
    Ich habe versucht in JavaScript ein style Element dazu zu basteln :-(
    Das ist aber wohl der falsche Weg!?

    Maggie

  15. #15
    ToM80 ist offline Foren-Gott
    registriert
    27-03-2006
    Ort
    Neuss
    Beiträge
    2.729

    AW: Navigation zum Bildwechsel

    Stimmt, gute Frage. Da ist mein Latein nun auch am Ende. Anna55 könnte hier sicher helfen, die ist in Sachen CSS ein Profi.
    Mit Javascript würde es mittels "onmouseover"/"onmouseout" auch gehen das wäre nicht so fein wie mit CSS ;-)

Seite 1 von 3 123 LetzteLetzte

Ähnliche Themen

  1. Navigation auf ganze Seite ausbreiten
    Von PolitikerNEU im Forum CSS und (X)HTML
    Antworten: 8
    Letzter Beitrag: 26-12-2006, 20:54
  2. CSS Navigation in Firefox
    Von thesa im Forum CSS und (X)HTML
    Antworten: 8
    Letzter Beitrag: 02-03-2006, 14:05
  3. Problem mit der Navigation
    Von thesecretboy im Forum JavaScript
    Antworten: 10
    Letzter Beitrag: 23-06-2005, 16:24
  4. Suche Navigation
    Von Scherbe im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 04-02-2005, 12:44
  5. Navigation frames problem (target)
    Von kingu im Forum JavaScript
    Antworten: 10
    Letzter Beitrag: 24-03-2004, 19:23

Lesezeichen

Berechtigungen

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