mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 11:42 Benutzername: Passwort: Auto-Login

Thema: Bildgallerie mit JavaScript vom 13.11.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Bildgallerie mit JavaScript
Seite: Zurück  1, 2, 3, 4  Weiter
Autor Nachricht
jens1337
Threadersteller

Dabei seit: 18.10.2010
Ort: blumberg
Alter: -
Geschlecht: Männlich
Verfasst Sa 20.11.2010 16:52
Titel

Antworten mit Zitat Zum Seitenanfang

Hey also nochmal ein Verusch Menno! :

Javascript :

function init_reaktion(){
document.images[0].onmouseover = function (){
document.getElementById("d1").innerHTML="Text1Bild";
};
document.images[1].onmouseover = function (){
document.getElementById("d1").innerHTML="Text2Bild";
};
for (i = 0; i < document.images.length; i++) {
document.images[i].onmouseout = function(){
document.getElementById("d1").innerHTML = "";
};
}
}

So und Html :

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reaktion auf mouseover und mouseout</title>
<script src="java.js" type="text/javascript"></script>
<style type="text/css">
</style>
</head>
<body onload="init_reaktion()">
<h1>Reaktion auf mouseover und mouseout</h1>

<img src="b1.jpg"/>
<img src="b2.jpg" />

<div id="d1"
style="width:500px;height:70px;background:#CCC;"></div>

</body>
</html>


So meine Frage ist es jetzt wie ich anstatt den text wie ich oben gemacht habe , Text 1 und Text 2 , die sollen jetzt Bilder sein , ich weis nur den begriff dafür nicht , muss dann innerHTML="Text1Bild"; weg und ein anderer Begriff rein ?

Mfg
  View user's profile Private Nachricht senden
DerM

Dabei seit: 18.01.2009
Ort: -
Alter: 42
Geschlecht: Männlich
Verfasst Sa 20.11.2010 18:13
Titel

Antworten mit Zitat Zum Seitenanfang

Willsten Tipp?
Lass es machen!

Dir fehlt jegliche Grundlage!!
  View user's profile Private Nachricht senden
Anzeige
Anzeige
jens1337
Threadersteller

Dabei seit: 18.10.2010
Ort: blumberg
Alter: -
Geschlecht: Männlich
Verfasst Sa 20.11.2010 18:25
Titel

Antworten mit Zitat Zum Seitenanfang

Ach ne... du konntest es wohl nach 2 min .... oh man ...

Kann mir bitte jemand nen Hilfreichen Tipp geben ?

mfg
  View user's profile Private Nachricht senden
zweitaccount

Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Sa 20.11.2010 21:41
Titel

Antworten mit Zitat Zum Seitenanfang

@DerM
Naja, guter Wille sollte ja schon belohnt werden. Lächel

@jens
Mit innerHTML kannst du praktisch jedwedes HTML in ein
Element schreiben. In deinem Fall, halt einfach einen
Image-Tag. Nur wirklich schön ist die Lösung nicht, die Dir
da vorschwebt.

Hier mal ein Schnipsel zum lernen:
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Einfacher Bilderwechsel</title>
<script type="text/javascript">

// @function   Initialisieren
var init = function ()
{
   // Alle Buidln sammeln
   var myImages = document.getElementsByTagName('img');
   
   // Über alle Images iterieren
   for (var i=0; i < myImages.length; i++)
   {
      // Wenn Bild nicht die class 'change-image' hat -> weiter
      if (myImages[i].className != 'change-image') continue;
      
      // MouseOver Event anhängen
      myImages[i].onmouseover = function()
      {
         changeImage(this);
      }
   }
}

// @function     Bilderwechsel
// @param        <object> gemouseovertes Bild
var changeImage = function (el)
{
   // Kein Element übergeben -> schüss.
   if (!el) return;
   
   // Hier die Id des Target eintragen
   var myTargetId = 'd1';
   
   // Target suchen
   var myTarget = document.getElementById(myTargetId);
   
   // Falls nicht da -> schüss
   if (!myTarget) return;
   
   // Prefix der Bilder die ins Target sollen
   var myImagePrefix = 'grosses_';
   
   // letztes Vorkommen eines Slashes suchen
   var myImageSlash = el.src.lastIndexOf("/");
   
   // Image Pfad ausschneiden
   var myImagePath = el.src.substr(0,myImageSlash + 1);
   
   // Image Bildname ausscheiden
   var myImageName = el.src.substr(myImageSlash + 1);
   
   // Neuen Bildpfad zusammensetzen
   var myNewImageSrc = myImagePath + myImagePrefix + myImageName;
   
   // Neues Bild erstellen
   var myNewImage = new Image();
   
   // Source zuweisen
   myNewImage.src = myNewImageSrc;
      
   // Wenn Bild geladen, reinklatschen
   myNewImage.onload = function()
   {
      // Alles raus aus dem Target
       myTarget.innerHTML = '';
      
       // Neues Bild rein
       myTarget.appendChild(myNewImage);
   }   
}

// Body onload Event
window.onload = init;
</script>
</head>

<body>
<h1>Reaktion auf mouseover und mouseout</h1>
    <img src="images/b1.jpg" class="change-image" alt="" />
    <img src="http://www.tralala.de/whatever/b2.jpg" class="change-image" alt="" />
    <div id="d1" style="width:500px;height:70px;background:#CCC;">
        Hier in das Div kommen die grossen Bilder rein. <br />
        Der Dateiname muss folgendermaßen benamst sein: <br />
        'grosses_' + alter Bildname.Suffix<br />
        Die grossen Bilder müssen im selben Ordner wie die kleinen liegen.<br />
    </div>
</body>
</html>
  View user's profile Private Nachricht senden
jens1337
Threadersteller

Dabei seit: 18.10.2010
Ort: blumberg
Alter: -
Geschlecht: Männlich
Verfasst So 21.11.2010 01:37
Titel

Antworten mit Zitat Zum Seitenanfang

Ich dank dir , ich werde das mal durchkauen und ich hoffe dann wenigstens ein bisschen gelernt zu haben !

Danke an die Sinnvollen und sehr Hilfreichen Kommentare !

DerM Hat bis jetzt nur genörgelt und mir nicht geholfen, nichtmal mit einem kleinen Tipp .

schön das es noch Menschen gibt die Helfen wollen Grins

Danke !

zweitaccount * huduwudu! *
  View user's profile Private Nachricht senden
jens1337
Threadersteller

Dabei seit: 18.10.2010
Ort: blumberg
Alter: -
Geschlecht: Männlich
Verfasst So 21.11.2010 02:04
Titel

Antworten mit Zitat Zum Seitenanfang

Hey also sehe ich das jetzt richtig das ich am Java nix mehr ändern muss , und eben untem im html dann so

<h1>Reaktion auf mouseover und mouseout</h1>
<img src="b1.jpg" class="change-image" alt="" />
<img src="b2.jpg" class="change-image" alt="" />
<div id="d1" style="width:500px;height:70px;background:#CCC;">
<img src="grosses_b2.jpg" width="533" height="400" />
<img src="grosses_b1.jpg" width="533" height="400" /> </div>


Wenn ich das so habe ändert sich bei mir eben nichts , was mache ich diesmal ( mal wieder ) falsch ?^^
  View user's profile Private Nachricht senden
zweitaccount

Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst So 21.11.2010 08:44
Titel

Antworten mit Zitat Zum Seitenanfang

jens1337 hat geschrieben:
Hey also sehe ich das jetzt richtig das ich am Java nix mehr ändern muss , und eben untem im html dann so

<h1>Reaktion auf mouseover und mouseout</h1>
<img src="b1.jpg" class="change-image" alt="" />
<img src="b2.jpg" class="change-image" alt="" />
<div id="d1" style="width:500px;height:70px;background:#CCC;">
<img src="grosses_b2.jpg" width="533" height="400" />
<img src="grosses_b1.jpg" width="533" height="400" /> </div>


Wenn ich das so habe ändert sich bei mir eben nichts , was mache ich diesmal ( mal wieder ) falsch ?^^



Moin moin,
kopier dir einfach den ganzen Code angefangen bei <html>
bis einschließlich </html> in eine Datei und speichere es als
z.B. index.html, lege sämtliche Bilder - ob groß oder klein - in
den selben Order wie die gespeicherte index.html.

Wenn Du dann diese Bilder einbaust:
<img src="b1.jpg" class="change-image" alt="" />
<img src="b2.jpg" class="change-image" alt="" />
müssen im selben Ordner auch die großen Varianten liegen, also
grosses_b1.jpg und grosses_b2.jpg.

In das Div mit der Id="d1" brauchst Du nichts legen, mit
»Hier in das Div kommen die grossen Bilder rein.« meinte
ich, dass dort die großen Bilder erscheinen werden - bei
onMouseOver auf die Thumbnails. Vorausgesetzt Du hast
alles so gemacht wie gerade beschrieben.

Doppelklicke nun die index.html.

Wenns dann nicht geht, bin ich mit meinem Latein auch am Ende.

Viele Grüße
zweitaccount

Lächel
  View user's profile Private Nachricht senden
bacon

Dabei seit: 24.10.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst So 21.11.2010 11:12
Titel

Antworten mit Zitat Zum Seitenanfang

Zitat:
DerM Hat bis jetzt nur genörgelt und mir nicht geholfen, nichtmal mit einem kleinen Tipp .


Du eröffnest hier Threads in einer Orthografie, dass sich mir die Nackenhaare ausstellen. Du belastest ein Fachforum mit absolut trivialen Anfängerfragen - die eigentlich noch nicht einmal Fragen sind, sondern Ausdruck von Faulheit, sich nicht mit entsprechenden Einsteigertutorials beschäftigen zu wollen. Du nervst mit verrückten Codesnippets, ohne [code]-Tags zur Formatierung zu benutzen. Die Leute hier helfen Dir trotzdem über 3(!!!) Seiten hinweg - und Du wagst es noch, Dich zu beschweren?

Was für ein Forum ist das MGI geworden, das solche Threads offen bleiben?
  View user's profile Private Nachricht senden
 
Ähnliche Themen Probleme mit Bildgallerie
[javascript] mit <select> feld wert an javascript funk
Javascript im XML
javascript im javascript?!
Javascript
javascript in php
Neues Thema eröffnen   Neue Antwort erstellen Seite: Zurück  1, 2, 3, 4  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.