Autor |
Nachricht |
jens1337
Threadersteller
Dabei seit: 18.10.2010
Ort: blumberg
Alter: -
Geschlecht:
|
Verfasst Sa 20.11.2010 17:52
Titel
|
|
|
Hey also nochmal ein Verusch :
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
|
|
|
|
|
DerM
Dabei seit: 18.01.2009
Ort: -
Alter: 42
Geschlecht:
|
Verfasst Sa 20.11.2010 19:13
Titel
|
|
|
Willsten Tipp?
Lass es machen!
Dir fehlt jegliche Grundlage!!
|
|
|
|
|
Anzeige
|
|
|
jens1337
Threadersteller
Dabei seit: 18.10.2010
Ort: blumberg
Alter: -
Geschlecht:
|
Verfasst Sa 20.11.2010 19:25
Titel
|
|
|
Ach ne... du konntest es wohl nach 2 min .... oh man ...
Kann mir bitte jemand nen Hilfreichen Tipp geben ?
mfg
|
|
|
|
|
zweitaccount
Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 20.11.2010 22:41
Titel
|
|
|
@DerM
Naja, guter Wille sollte ja schon belohnt werden.
@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> |
|
|
|
|
|
jens1337
Threadersteller
Dabei seit: 18.10.2010
Ort: blumberg
Alter: -
Geschlecht:
|
Verfasst So 21.11.2010 02:37
Titel
|
|
|
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
Danke !
zweitaccount
|
|
|
|
|
jens1337
Threadersteller
Dabei seit: 18.10.2010
Ort: blumberg
Alter: -
Geschlecht:
|
Verfasst So 21.11.2010 03:04
Titel
|
|
|
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 ?^^
|
|
|
|
|
zweitaccount
Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 21.11.2010 09:44
Titel
|
|
|
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
|
|
|
|
|
bacon
Dabei seit: 24.10.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 21.11.2010 12:12
Titel
|
|
|
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?
|
|
|
|
|
|
|
|
Ähnliche Themen |
Probleme mit Bildgallerie
[javascript] mit <select> feld wert an javascript funk
javascript im javascript?!
Javascript
javascript in php
JavaScript in PHP
|
|