Mouseover an 2 Orten

asseskiller · 4. Juni 2007

Hi ich würder gerne wissen Wie ein Bildeffekt wie bei dieser Seite funktioniert?
http://cgi.ebay.de/ws/eBayISAPI.dll?ViewItem&item=190116749608
Ich würde also gerne wissen wie sich das Bild ändert wenn ich an einer anderen Stelle über ein anderes Bild gehe.

Danke im Vorraus

krizzelfix · 4. Juni 2007

Hallo asseskiller,

das kannst du mit Javascript machen.
Dazu musst du in den img-Tag das attribute onmouseover="" einfügen. Dort rufst du dann eine Funktion auf in der du über die ID das Bild wechselst.

Grüße

tewes

asseskiller · 4. Juni 2007

Ich hab leider kaum Ahnung von Javascript. Kannst du es mir vielleicht etwas ausführlicher erklären?
Was muss ich da für eine Funktion aufrufen und wo wird diese definiert?

Danke für die Antwort

krizzelfix · 4. Juni 2007

Bin auch nicht der Crack in JavaScript aber so in der Art sollte es gehen. Habs nicht getestet.
Bei problemen einfach melden

HTML:

<html>
<head>
<title></title>
<script type="language/javascript">
<!--
function change(id, src){
    pic = document.getElementByID(id);
    pic.src = src;
}
//-->
</script>
<head>
<body>
<img src="xyz.jpg" id="big_pic" /><!--großes Bild-->
<img src="xyz2.jpg" onmouseover="change('big_pic', this.src);" /><!--Kleines Bild-->
</body>
</html>

asseskiller · 6. Juni 2007

Hmm funzt irgendwie nicht. Das kleine Bild verschwindet wenn ich den Text dort so hineinsetze.
Ich hab alles so gelassen bis auf die Bildernamen xyz.jpg und xyz2.jpg. Dafür hab ich b1.jpg und b2.jpg angegeben so heißen ja die bilder.
Muss ich nochwas modifizieren

EDIT

Oh sorry hab nen Anführungzeichen vergessen, jetzt wird zwar das kleine bild angezeigt, aber es passiert nix wenn ich drüber gehe

asseskiller · 6. Juni 2007

Ich brauche Dringend Hilfe

BadByte · 6. Juni 2007

kannst du nicht einfach deinen Code posten, dann helf ich dir ;-)

asseskiller · 6. Juni 2007

Danke

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<script type="language/javascript">
<!--
function change(id, src){
    pic = document.getElementByID(id);
    pic.src = src;
}
//-->
</script>
</head>

<body>
<table width="200" border="0" cellpadding="0" cellspacing="0" height="100%" align="center">
  <tr>
    <td><img src="ol.jpg" width="35" height="121" /></td>
    <td>&nbsp;</td>
    <td><img src="or.jpg" width="41" height="121" /></td>
  </tr>
  <tr>
    <td  background="r.jpg">&nbsp;</td>
    <td>
	<div style="height:100%; width:100%; margin-top:10px;">
		<table border="0" width="684px" height="100%" cellpadding="0" cellspacing="
		0">
			<tr>
				<td height="50px" valign="top">
				<img src="schriftzug2.jpg" />				</td>
			</tr>
			<tr>
				<td height="331" valign="top">
				  <table width="680" border="0" style="margin-top:5px;">
                    <tr>
                      <td width="330" rowspan="5"><img src="b1.jpg" height="320" width="320"id="big_pic" //></td>
                      <td width="340"><img src="cad.jpg" width="340" height="30" /></td>
                    </tr>
                    <tr>
                      <td height="114" align="right" style="border-bottom:1px solid #999999;">
					  <img src="b2.jpg" height="110" width="110" style"margin:2px;" onmouseover="change('big_pic', this.src);"/>
					  <img src="b3.jpg" height="110" width="110" style"margin:2px;"/>
					  <img src="b4.jpg" height="110" width="110" style"margin:2px;"/></td>
                    </tr>

BadByte · 6. Juni 2007

ok hier der verbesserte Code

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<script type="text/javascript">
<!--
function change(id, src){
    pic = document.getElementById(id);
    pic.src = src.src;
}
//-->
</script>
</head>

<body>
<table width="200" border="0" cellpadding="0" cellspacing="0" height="100%" align="center">
  <tr>
    <td><img src="ol.jpg" width="35" height="121" /></td>
    <td>&nbsp;</td>
    <td><img src="or.jpg" width="41" height="121" /></td>
  </tr>
  <tr>
    <td  background="r.jpg">&nbsp;</td>
    <td>
	<div style="height:100%; width:100%; margin-top:10px;">
		<table border="0" width="684px" height="100%" cellpadding="0" cellspacing="
		0">
			<tr>
				<td height="50px" valign="top">
				<img src="schriftzug2.jpg" />				</td>
			</tr>
			<tr>
				<td height="331" valign="top">
				  <table width="680" border="0" style="margin-top:5px;">
                    <tr>
                      <td width="330" rowspan="5"><img src="b1.jpg" height="320" width="320"id="big_pic" /></td>
                      <td width="340"><img src="cad.jpg" width="340" height="30" /></td>
                    </tr>
                    <tr>
                      <td height="114" align="right" style="border-bottom:1px; solid #999999;">
					    <img src="b2.jpg" height="110" width="110" style="margin:2px;" onmouseover = "change('big_pic', this);" />
					    <img src="b3.jpg" height="110" width="110" style="margin:2px;" />
					    <img src="b4.jpg" height="110" width="110" style="margin:2px;" />
					  </td>
                    </tr>

der Hauptfehler war das es heißt "document.getElementById" du hast "ID" geschrieben...

außerdem muss es heißen

PHP:

<script type = "text/JavaScript"

da hattest du auch was anderes,

weiter unten hast du die "=" zeichen nach der style Eigenschaft vergessen, weiß aber net ob des schlimm ist.....

gruß : clemix

BadByte · 6. Juni 2007

oh sry ich hab noch was verändert, das wäre aber auch in deiner Version richtig gewesen...

bei "onmouseover" übergebe ich nicht die Quelle von dem Bild sondern den Zeiger,

PHP:

onmouseover = "change('big_pic', this);"

und hole mir dann in der Funktion die Eigenschaft "src" von dem Zeiger.....

PHP:

 pic.src = src.src;

asseskiller · 6. Juni 2007

Echt sehr geil.
Nur eine frage wie bekommt man es hin, das wenn man nicht über dem Bild ist, es wieder zurückspringt?

DANKE VIELMALS

krizzelfix · 6. Juni 2007

Dazu musst du onmousout aufrufen und die Funktion etwas verändern

Code:

<script type="text/javascript">
<!--
function change(id, src){
    if(src != null)
    {
    pic = document.getElementById(id);
    pic.src = src.src;
    }
   else {
    pic = document.getElementById(id);
    pic.src = 'standardbild.jpg'; //der Name des Bildes welches dann angezeigt werden soll.
   }
}
//-->
</script>

Grüße

tewes

BadByte · 6. Juni 2007

also wenn dir JavaScript gefällt, solltest du dir mal ein buch Zulegen in der Richtung...oder wenigstens mal auf http://de.selfhtml.org/javascript/sprache/eventhandler.htm dir die Eventhandler anschaun...

gruß: clemix

asseskiller · 6. Juni 2007

Kannst du mir nen gutes Buch empfehlen und wie schwer schätzt du das ganze im vergleich zu PHP oder so ein.

BadByte · 7. Juni 2007

JavaScript & Ajax von Christian Wenz is aus dem Galileo Computing Verlag...
es giebt auch viele WEbseiten die JavaScript KnowHow vermitteln,
Java Script ist vom lernen her eine Idee einfacher als PHP, so schätze ich das ein....
das Prob an JavaScript ist nur, dass du da weniger FehlerInfo kriegst, außer:
du benutzt die Javascript Konsole vom MozillaFirefox....

gute Nacht: clemix

krizzelfix · 7. Juni 2007

Wenn du Javascript lernen willst kann ich dir den FireBug für den FireFox empfehlen.
Damit kann man Javascript Debuggen und "live" die CSS Dateien verändern etc.
Ist ein echt gutes Tool worauf ich bei Websitenprogrammierung nicht mehr verzichten will.

Grüße

tewes

Suche

Mouseover an 2 Orten

asseskiller

Lt. Junior Grade

krizzelfix

Commander

asseskiller

Lt. Junior Grade

krizzelfix

Commander

asseskiller

Lt. Junior Grade

asseskiller

Lt. Junior Grade

BadByte

Lt. Junior Grade

asseskiller

Lt. Junior Grade

BadByte

Lt. Junior Grade

BadByte

Lt. Junior Grade

asseskiller

Lt. Junior Grade

krizzelfix

Commander

BadByte

Lt. Junior Grade

asseskiller

Lt. Junior Grade

BadByte

Lt. Junior Grade

krizzelfix

Commander

Ähnliche Themen