Wie geht das?

[Florentin Rack]

Ich weiß, dass das ein schlechter Threadtitel ist, aber ich kann mein Problem schlecht ganz kurz beschreiben. Also, es geht um folgendes:
Zu sehen sein soll "pics/german.jpeg". Bei onMouseOver soll man "pics/britain.jpeg" sehen und beim onMouseOut wieder "pics/german.jpeg". Soweit, so einfach. Nun soll aber bei einem onClick auf das Highlight-Bild ein anderes Bild zu sehen sein, nämlich "pics/gv3.avi.gif". Und nachdem man 5 Sekunden llang dieses Bild sieht, soll die Seite "page.php" geladen werden.
Ich hab mich bereits dran versucht:
<a href="page.php" onMouseOver="image.src='britain.jpeg';" onMouseOut="image.src='german.jpeg';" onClick="image.src='gv3.avi.gif';"></a>
<img name="image" src="german.jpeg" border="0" >
Nur leider passiert da dann gar nix, wahrscheinlich weil im a-Tag kein onClick erlaubt ist.
Aber wie geht das dann? Ich wäre froh, wenn ihr mir helfen könnt.

[Thorsten F.]

Hi,

hast du dir das mal durchgelesen?

http://www.validome.org/doc/HTML_ge/javascript/beispiele/buttons.htm

Grüße,
Thorsten F.

[Florentin Rack]

Hi,

hast du dir das mal durchgelesen?

http://www.validome.org/doc/HTML_ge/javascript/beispiele/buttons.htm

Grüße,
Thorsten F.

Jaja, das hab ich. Aber wie kann ich das so abändern, dass beim Klick nicht eine Seite geöffnet wird, sondern erst ein anderes Bld erscheint und dann nach 5 Sekunedn erst die Seite?

Grüße,
Florentin Rack

[Karin]

Hi Florentin,

Jaja, das hab ich. Aber wie kann ich das so abändern, dass beim Klick nicht eine Seite geöffnet wird, sondern erst ein anderes Bld erscheint und dann nach 5 Sekunedn erst die Seite?

indem Du das Laden der Seite in Dein Javascript packst, statt in das
href-Attribut. Solche Links sehen z.B. so aus:

<a href="javascript:void(0)" onclick="deine_funktion();">...

In Deiner Funktion baust Du Dir dann, wie gehabt Deine 5-Sekunden-
Verzögerung. Die gewünschte Seite lädst Du mit

window.location.href = "URL_der_gewünschten_Seite";

Viel Erfolg!

[globe]

n'abend,

<a href="javascript:void(0)" onclick="deine_funktion();">...

solche Links möchte man nicht haben. warum? Weil man diese Seiten nur ansteuern kann, wenn Javascript aktiviert ist. Was machen Browser / Bots ohne Javascript?

[code=HTML]<script type="text/javascript">
  function swapImage( image )
  {
    /* wie auch immer du die bilder tauschen möchtest */
  }

function initClick( link )
  {
    window.setTimeout('window.location.href="'. link.href .'";', 5000);
    // 5000 Millisekunden sind 5 Sekunden ;)
  }
</script>

<a href="mein/ziel.php" onclick="swapImage(this); initClick(this); return false;">...</a>[/code]

Selbstverfreilich ist das ein ungetesteter out-of-my-fingertips Hinweis, wie du evtl an dein Ziel kommen könntest.

weiterhin schönen abend...

[Karin]

Hi,

n'abend,

<a href="javascript:void(0)" onclick="deine_funktion();">...

solche Links möchte man nicht haben. warum? Weil man diese Seiten nur ansteuern kann, wenn Javascript aktiviert ist. Was machen Browser / Bots ohne Javascript?

Na ja, dann muss er das Dokument halt so bauen, dass ohne Javascript eine Javascriptfreie Variante des Dokuments geliefert wird. Den Hinweis hat Gunnar ihm ja schon gegeben.

<a href="mein/ziel.php" onclick="swapImage(this); initClick(this); return false;">...</a>[/code]

Das Problem bei dieser Variante ist, dass der URL im href-Attribut
sofort aufgerufen wird, egal, was da noch an Event-Handlern definiert
ist. Das wollte er ja nu gerade vermeiden.

Grüße

[Mathias Brodala]

Hallo Karin.

<a href="mein/ziel.php" onclick="swapImage(this); initClick(this); return false;">...</a>[/code]

Das Problem bei dieser Variante ist, dass der URL im href-Attribut
sofort aufgerufen wird, egal, was da noch an Event-Handlern definiert
ist.

Schon einmal ausprobiert?

Einen schönen Donnerstag noch.

Gruß, Mathias

[Patrick Andrieu]

Hallo Mathias!

<a href="mein/ziel.php" onclick="swapImage(this); initClick(this); return false;">...</a>[/code]

Schon einmal ausprobiert?

Karin hat wohl "return false;" übersehen...

Viele Grüße aus Frankfurt/Main,
Patrick

[Karin]

...oops,

Karin hat wohl "return false;" übersehen...

...das hat sie wohl

Grüße

[Gunnar Bittersmann]

Hello out there!

Ich weiß, dass das ein schlechter Threadtitel ist,

In der Tat.

<a href="page.php" onMouseOver="image.src='britain.jpeg';" onMouseOut="image.src='german.jpeg';" onClick="image.src='gv3.avi.gif';"></a>
<img name="image" src="german.jpeg" border="0" >
Nur leider passiert da dann gar nix, wahrscheinlich weil im a-Tag kein onClick erlaubt ist.

Eher, weil beim 'img'-Element kein 'name'-Attribut erlaubt ist. Und BTW ein 'alt'-Attribut _verlangt_ wird.

Und weil du nicht einfach mit 'image.src' darauf zugreifen kannst.

Verwende das 'id'-Attribut und 'document.getElementById("image").src'.

Für die Verzögerung interessiert dich die Funktion setTimeout().

Und vergiss nicht, die alternative Navigationsmöglichkeit für Nutzer (u.a. Clients!!) ohne JavaScript anzubieten.

See ya up the road,
Gunnar

[molily]

Hallo,

<a href="page.php" onMouseOver="image.src='britain.jpeg';" onMouseOut="image.src='german.jpeg';" onClick="image.src='gv3.avi.gif';"></a>
<img name="image" src="german.jpeg" border="0" >

Eher, weil beim 'img'-Element kein 'name'-Attribut erlaubt ist.

Doch doch.

document.images.image oder document.image müsste z.B. gehen.

Mathias

[Gunnar Bittersmann]

Hello out there!

Eher, weil beim 'img'-Element kein 'name'-Attribut erlaubt ist.
Doch doch.

Dabei hatte ich extra nachgeschaut – hm, in der DTD, nach welcher 'img' kein 'name'-Attribut hat: XHTML 1.0 Strict.

Ich dachte, das wäre bis auf die Syntax voll kompatibel zu HTML 4.01 Strict; falsch gedacht. In HTML 4.01 Strict kann 'img' ein 'name'-Attribut haben, wie auch in in XHTML 1.0 Transitional und HTML 4.01 Transitional.

See ya up the road,
Gunnar

PS: Die Frameset-DTDs hab ich wegen Irrelevanz weggelassen. ;-) XHTML 1.1 ebenso. ;-)

[Patrick Andrieu]

Hallo Gunnar!

In HTML 4.01 Strict kann 'img' ein 'name'-Attribut haben, wie auch in in XHTML 1.0 Transitional und HTML 4.01 Transitional.

Es wird aber darauf hingewiesen, dass es nur aus Gründen der Rückwärtskompatibilität als Standard verblieben ist. Demnach sollte man schon, ein img-Element mit einer vergebenen ID ansprechen, wenn man _jetzt_ neue Seiten schreibt. Sieh es so: du warst ausnahmsweise nicht genau genug ;)

Viele Grüße aus Frankfurt/Main,
Patrick

[Florentin Rack]

Danke, Gunnar, du hast mir geholfen ;)
Ich habe jetzt folgendes:

<script type="text/javascript">
function pic() {
document.write(<span id="counter"><p>bla</p><img src="gv3.avi.gif" alt="bild2" width="16" height="16"></span>)
}
</script>

</head>
  <body>

<script language="javascript">

var sec = 10;
function count() {
sec--;
document.all.counter.innerText = "de.php wrid geldaen";
if(sec > 0) {
window.setTimeout("count()", 1000);
}
if(sec == 0) {
top.location.href='http://neueseite.html'
}
}
window.setTimeout("count()", 1000);
</script>

<img id="image" src="german.jpeg" alt="bild" border="0" onmouseover="document.getElementById('image').src='britain.jpeg';" onmouseout="document.getElementById('image').src='german.jpeg';" onclick="pic()" >
</body>
</html>

Aber irgendwie geht das noch nicht...

[Thomas J.S.]

Hallo,

Ich habe jetzt folgendes:
Aber irgendwie geht das noch nicht...

Grüße
Thomas

----------------
<html>
<head>
<title>Dynamische grafische Buttons</title>
<script type="text/javascript">
var sec;

Normal1 = new Image();
Normal1.src = "button1.gif";     /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "button1h.gif"; /* erste Highlight-Grafik */
/* usw. fuer alle weiteren zu benutzenden Grafiken */

function Bildwechsel(Bildnr,Bildobjekt) {
 window.document.images[Bildnr].src = Bildobjekt.src;
}

function count(sec) {
 sec++;
 if(sec < 10) {
  document.getElementById('counter').style.display = "block";
  document.getElementById('standard').style.display = "none";
 }
 if(sec == 10) {
  window.location.href='neueseite.html'
 }
 //alert(sec)
 window.setTimeout(eval("count(" + sec + ")"), 1000);
}
</script>
<style type="text/css">
 #counter { display:none; }
</style>
</head>
<body bgcolor="#FFFFC0" text="#000000">

<img id="standard" src="button1.gif" width="130" height="30" border="0" alt="Home" onclick="count(0)" onmouseover="Bildwechsel(0,Highlight1)" onmouseout="Bildwechsel(0,Normal1)">
<div id="counter">
 <img id="counterimage" src="button3.gif" width="130" height="30" border="0" alt="Home">
 <br>de.php wrid geldaen
</div>

</html>

[Thomas J.S.]

...

function count(sec) {
sec++;
if(sec < 10) {
  document.getElementById('counter').style.display = "block";
  document.getElementById('standard').style.display = "none";
}
if(sec == 10) {
  window.location.href='neueseite.html'
}
//alert(sec)
window.setTimeout(eval("count(" + sec + ")"), 1000);
}

»

das geht auch einfacher:
------
function count() {
  document.getElementById('counter').style.display = "block";
  document.getElementById('standard').style.display = "none";
  window.setTimeout("window.location.href='wasauchimmer.html'", 10000);
 }
------

und dann  <img id="standard" ...  onclick="count()" .... >

der Rest ist dasselbe.

Grüße
Thomas