Bilder beim mit der Maus überfahren Wechseln
El Supremo
0 0 El Supremo
Bilder beim mit der Maus überfahren Wechseln
El Supremo
hallo,
gestern abend kam ich auf die idee, mal ein wenig mit beim überfahren mit der maus wechselnden grafiken zu experimentieren. ich wusste zwar, dass hier ein thema dazu existiert, wollte es aber selbst versuchen. mein ziel war eine javascript funktion, welche mit jedem bild funktioniert; einzige voraussetzung sollte sein, dass das bild eine dateiendung mit drei buchstaben hat, auf "a.endung" endet und durch eine grafik mit "b.endung" ersetzt werden soll.
dadurch scheidet die im thema "Dynamische grafische Buttons" beschriebene lösung ja schonmal aus, da dort angaben für jede bilddatei gemacht werden müssen.
herausgekommen ist jetzt dieses script, welches allerdings noch ein wenig kränkelt.
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="author" content="El Supremo">
<meta name="date" content="2006-10-04">
<title>Bildwechsel - Funktioniert nicht</title>
<script language="JavaScript">
<!--
function bild_wechseln(bildid)
{
var bild = document.getElementById(bildid);
var url = bild.getAttribute('src');
var url_laenge = url.length;
var endungsbuchstabe_nummer = url_laenge - 5;
var beginn_endung = url_laenge - 4;
var url_endung = "";
while (beginn_endung < url_laenge)
{
url_endung = url_endung + url.charAt(beginn_endung);
beginn_endung++;
}
var url_erster_teil = "";
var aktuelles_zeichen = "";
for (var i = 1; i < endungsbuchstabe_nummer; i++)
{
aktuelles_zeichen = url.charAt(i);
url_erster_teil = url_erster_teil + aktuelles_zeichen;
}
var endungsbuchstabe = url.charAt(endungsbuchstabe_nummer);
if (endungsbuchstabe == 'a')
{
var neue_url = url_erster_teil + "b" + url_endung;
bild.setAttribute('src', neue_url);
document.getElementById('bla').setAttribute('value', neue_url);
}
else
{
neue_url = url_erster_teil + "a" + url_endung;
bild.setAttribute('src', neue_url);
document.getElementById('bla').setAttribute('value', neue_url);
}
}
//-->
</script>
</head>
<body>
<img src='testbild1b.jpg' width="500px" height="500px" id="wechselbild1" onMouseOver="bild_wechseln(this.getAttribute('id'))" onMouseOut="bild_wechseln(this.getAttribute('id'))">
<input type="text" id="bla" value="123"></input>
</body>
</html>
lässt man sich per alert(neue_url); die neue bildadresse anzeigen, scheint das problem offensichtlich: die ersten paar zeichen werden wiederholt. konkret sieht das dann nach ein paar fehlgeschlagenen bildwechseln so aus:
p://el-supremos-place.de/sonstiges/temp/://el-supremos-place.de/sonstiges/temp/://el-supremos-place.de/sonstiges/temp/testbild1a.jpg
(wer es selber testen will: www.el-supremos-place.de/sonstiges/temp/bildwechsel_geht_nicht.html)
was das problem ist, ist zwar offensichtlich, aber woher es kommt ist mir ein rätsel. vor allem, weil der fehler in dem folgendem script nicht auftritt:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="author" content="El Supremo">
<meta name="date" content="2006-10-04">
<title>Bildwechsel - Funktioniert</title>
<script language="JavaScript">
<!--
function bild_wechseln(bildid)
{
var bild = document.getElementById(bildid);
var url = bild.getAttribute('src')
var url_laenge = url.length;
var endungsbuchstabe_nummer = url_laenge - 5
var url_erster_teil = "";
var aktuelles_zeichen = "";
for (var i = 1; i < endungsbuchstabe; i++)
{
aktuelles_zeichen = url.charAt(i);
url_erster_teil = url_erster_teil + aktuelles_zeichen;
}
var endungsbuchstabe = url.charAt(endungsbuchstabe_nummer);
if (endungsbuchstabe == 'a')
{
var neue_url = url_erster_teil + "testbild1b.jpg";
bild.setAttribute('src', neue_url);
}
else
{
neue_url = url_erster_teil + "testbild1a.jpg";
bild.setAttribute('src', neue_url);
}
}
//-->
</script>
</head>
<body>
<img src='testbild1a.jpg' width="500px" height="500px" id="wechselbild1" onMouseOver="bild_wechseln(this.getAttribute('id'))" onMouseOut="bild_wechseln(this.getAttribute('id'))">
</body>
</html>
(zu testen unter www.el-supremos-place.de/sonstiges/temp/bildwechsel_geht.html )
dort ist der einzige unterschied zum oberen script, dass der dateiname des bildes sich nicht mit in der in der variablen url_erster_teil gespeicherten zeichenkette befindet, sondern zusammen mit dem a bzw. b mit der zeichenkette verknüpft wird.
würden beide scripts nicht funktionieren, dann hätte ich wenigstens noch einen konkreten ansatzpunkt, um das problem zu suchen- nämlich die for schleife, in der die in der variablen url_erster_teil gespeicherte zeichenkette erzeugt wird. so aber, stehe ich total auf dem schlauch.
das zweite script will ich nicht verwenden, da dort der dateiname vorgegeben ist.
falls mir einer von euch, der im gegensatz zu mir im moment nicht das gefühl hat, ein brett vor dem kopf zu haben, helfen könnte, wäre ich sehr dankbar!
also...los. :-)
--
Ich weiß, dass ich nichts weiß. (Sokrates)
Ich weiß, dass ich nichts weiß. (Sokrates)
-
Hellihello
zuviel und zu lang für mich. extrahiere das problem, dabei kommst u.u. schon selbst drauf.
also los (;-)
frankx
-
»»extrahiere das problem, dabei kommst u.u. schon selbst drauf.
jetzt bin ich darauf gekommen...und könnte mich vor ärger in den ar*** beißen. der fehler war extrem blöd: in der for schleife habe ich i einen startwert von 1 gegeben, anstatt 0. da i in charAt(i) die die url des bildes ausliest, kann das ja nur schiefgehen; der erste buchstabe fehlt.
wer das fertige script haben will:<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="author" content="El Supremo">
<meta name="date" content="2006-10-04">
<title>Bildwechsel - Funktioniert nicht</title>
<script language="JavaScript">
<!--
function bild_wechseln(bildid)
{
var bild = document.getElementById(bildid);
var url = bild.getAttribute('src');
var url_laenge = url.length;
var endungsbuchstabe_nummer = url_laenge - 5;
var beginn_endung = url_laenge - 4;
var url_endung = "";
while (beginn_endung < url_laenge)
{
url_endung = url_endung + url.charAt(beginn_endung);
beginn_endung++;
}
var url_erster_teil = "";
var aktuelles_zeichen = "";
for (var i = 0; i < endungsbuchstabe_nummer; i++)
{
aktuelles_zeichen = url.charAt(i);
url_erster_teil = url_erster_teil + aktuelles_zeichen;
}
var endungsbuchstabe = url.charAt(endungsbuchstabe_nummer);
if (endungsbuchstabe == 'a')
{
var neue_url = url_erster_teil + "b" + url_endung;
bild.setAttribute('src', neue_url);
}
else
{
neue_url = url_erster_teil + "a" + url_endung;
bild.setAttribute('src', neue_url);
}
}//-->
</script>
</head>
<body>
<img src='testbild1b.jpg' width="500px" height="500px" id="wechselbild1" onMouseOver="bild_wechseln(this.getAttribute('id'))" onMouseOut="bild_wechseln(this.getAttribute('id'))">
</body>
</html>jetzt würde mich nur noch interessieren, warum im thema "Dynamische grafische Buttons" steht, man müsse dafür unbedingt new Image() verweden. wäre schön, falls mir das jemand erklären könnte.
--
Ich weiß, dass ich nichts weiß. (Sokrates)-
Hellihello
jetzt würde mich nur noch interessieren, warum im thema "Dynamische grafische Buttons" steht, man müsse dafür unbedingt new Image() verweden. wäre schön, falls mir das jemand erklären könnte.
kann ich nicht, weil ich nicht weiss, auf welches thema du dich beziehst. das script tauscht ja scheinbar lediglich Bildname_a.jpg in Bildname_b.jpg und umgekert aus, also reine Stringoperationen...;
frankx
-
kann ich nicht, weil ich nicht weiss, auf welches thema du dich beziehst.
ich beziehe mich auf dieses thema: http://de.selfhtml.org/javascript/beispiele/buttons.htm
(hatte vorher keine möglichkeit gefunden, einen anständigen link zu erhalten; öffnet man den link von der suche aus nicht in einem neuen fenster, bleibt in der adresszeile die url der suche)das script tauscht ja scheinbar lediglich Bildname_a.jpg in Bildname_b.jpg und umgekert aus, also reine Stringoperationen...;
richtig, aber mehr will ich ja auch garnicht...
--
Ich weiß, dass ich nichts weiß. (Sokrates)
-
-
-