[FRAGE] Onmouseover Source ändern

[zer0xc00l]

Hallo,

ich würde gerne auf einer Seite, Bilder mit mouseover-Funktion per Link ändern.
Das sich die Bildsource ändert habe ich schon geschaft, jedoch weiß ich nicht bzw. finde ich nichts darüber wie man die Source der Onmouseover-Funktion ändert.

Bild:

<img src="bild1.jpg" width="150" height="200" name="swap" id="bild" onmouseover="document.swap.src='bild1over.jpg';"onmouseout="document.swap.src='mitglieder/bild1.jpg';">

Links:

<a href="javascript:void(0);" onclick="document.getElementById('bild').src='bild1.jpg';">Bild1</a>
<a href="javascript:void(0);" onclick="document.getElementById('bild').src='bild2.jpg';">Bild2</a>

Danke im Voraus

 

[tsseh]

Das sich die Bildsource ändert habe ich schon geschaft, jedoch weiß ich nicht bzw. finde ich nichts darüber wie man die Source der Onmouseover-Funktion ändert.

warum soll das dort nicht genauso funktionieren?

<a href="javascript:void(0);" onclick="document.getElementById('bild').src='bild1.jpg';">Bild1</a>
<a href="javascript:void(0);" onclick="document.getElementById('bild').src='bild2.jpg';">Bild2</a>

wenn du eigentlich keinen link haben willst, warum nimmst du dann ein a-element und keinen button?
und warum setzt du dann auch noch href?
den onklick handler im html zu setzen ist schlecht zu pflegen.
wenn du jquery nimmst, kannst du die bilder evtl. auch gleich animiert ein/ausblenden

$(function()
{
  $("#bild").mouseover(function()
  { 
    $(this).attr("src", "dein anderes bild");
  }).mouseout(function()
  {
    $(this).attr("src", "dein bild");
  });
});

mit http://api.jquery.com/fadeout/ / fadein kannst du das dann noch animieren

 

[zer0xc00l]

Danke für die Antwort,

jedoch ist das ja nur der Mouseover-Effekt.
Ich habe ca. 20 Links womit immer ein anderes bestimmtes Bild angezeigt werden soll,
zu diesen Bildern gibt es wiederum ein bestimmtes Hover-Bild.
Das heißt ich habe ca. 40 verschiedene Bilder die auf dem selben Objekt angezeigt werden sollen.
Also bräuchte ich eine Funktion mit der ich die Mouseover-Source ändern kann.

Beispiel:
Klicke ich Link 1 soll Bild 1 angezeigt werden und wenn ich über das Bildobjekt fahre soll als Mouseover Bild 2 angezeigt werden.
Klicke ich Link 2 soll Bild 3 angezeigt werden und wenn ich über das Bildobjekt fahre soll als Mouseover Bild 4 angezeigt werden.
Auf der Seite soll sich immer nur ein Bild befinden.

Muss zugeben für mich ist es schwer das Problem zu Beschreiben da ich erst wenige Stunden Erfahrung mit PHP, jQuery und Javascript habe.
Jedoch Kontaktformular, Gästebuch, Bildergalerie waren kein Problem für mich da es dafür auch viele Erklärungen im Netz gibt.

 

[tsseh]

jedoch ist das ja nur der Mouseover-Effekt.
Ich habe ca. 20 Links womit immer ein anderes bestimmtes Bild angezeigt werden soll,
zu diesen Bildern gibt es wiederum ein bestimmtes Hover-Bild.
Das heißt ich habe ca. 40 verschiedene Bilder die auf dem selben Objekt angezeigt werden sollen.
Also bräuchte ich eine Funktion mit der ich die Mouseover-Source ändern kann.

also was ist jetzt dein problem?
du weisst, wie du die bilder austauschen kannst, mit dem button klappt es ja
du willst wissen, wie du jetzt bei Mouseover am besten das entsprechende hover-equivalent einsetzt?
dann benenne die alle nach einem schema, lese den alten src aus, manipulier diesen entsprechend deinem schema und setze den so geänderten src
also du hast originalscr.jpg
schema originalscr_hover.jpg
im mouseover:
originalscr.jpg auslesen
".jpg" am ende ersetzen durch "_hover.jpg"
im mouseout:
originalscr_hover.jpg auslesen
"_hover.jpg" am ende ersetzen durch ".jpg"

 

[zer0xc00l]

Danke,

habs jetzt gelöst.

CSS:

.img-swap {cursor: pointer; position: relative;}
.img-swap:hover {background: none;}

jQuery:

<script src="jquery.min.js" language="javascript" type="text/javascript"></script>
<script type="text/JavaScript">
// prepare the form when the DOM is ready 
$(document).ready(function() {
	
	$(".img-swap").hover(
        function(){
			this.src = this.src.replace("_off","_on");
			$(this).css({opacity: 0}).animate({opacity: 1},{ queue: false, duration: 'slow' });
		},
        function(){
			this.src = this.src.replace("_on","_off");
			$(this).css({opacity: 0}).animate({opacity: 1},{ queue: false, duration: 'slow' });
	});
	var imgSwap = [];
	 $(".img-swap").each(function(){
		imgUrl = this.src.replace("_off","_on");
		imgSwap.push(imgUrl);
	});
	$(imgSwap).preload();
});
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

</script>

Image:

<img src="bild1_off.jpg" alt="" id="bild" width="150" height="200" class="img-swap" />

Links:

<a href="javascript:void(0);" onclick="document.getElementById('bild').src='bild1_off.jpg';">Bild1</a> 
<a href="javascript:void(0);" onclick="document.getElementById('bild').src='bild2_off.jpg';">Bild2</a>

 

[zer0xc00l]

Danke,

habs jetzt gelöst.

CSS:

.img-swap {cursor: pointer; position: relative;}
.img-swap:hover {background: none;}

jQuery:

<script src="jquery.min.js" language="javascript" type="text/javascript"></script>
<script type="text/JavaScript">
// prepare the form when the DOM is ready 
$(document).ready(function() {
	
	$(".img-swap").hover(
        function(){
			this.src = this.src.replace("_off","_on");
			$(this).css({opacity: 0}).animate({opacity: 1},{ queue: false, duration: 'slow' });
		},
        function(){
			this.src = this.src.replace("_on","_off");
			$(this).css({opacity: 0}).animate({opacity: 1},{ queue: false, duration: 'slow' });
	});
	var imgSwap = [];
	 $(".img-swap").each(function(){
		imgUrl = this.src.replace("_off","_on");
		imgSwap.push(imgUrl);
	});
	$(imgSwap).preload();
});
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

</script>

Image:

<img src="bild1_off.jpg" alt="" id="bild" width="150" height="200" class="img-swap" />

Links:

<a href="javascript:void(0);" onclick="document.getElementById('bild').src='bild1_off.jpg';">Bild1</a> 
<a href="javascript:void(0);" onclick="document.getElementById('bild').src='bild2_off.jpg';">Bild2</a>