Datenschutzerklärung

iframe und java mouseover

Validome - Forum

 Startseite Validome
RSS 2.0  
Sie sind nicht angemeldet. Atom 1.0  
Forum Home / Javascript-Forum /

iframe und java mouseover

   Beitrag schreiben
Autor
Beitrag Seiten: 1
shivasun
Mitglied

Registriert: 22.12.2005
Beiträge: 6
hallooooooo,

ich sitze an einer aufgabenstellung, welche mehrere lösungen zulassen würde. das folgende skript stellt einen animierten button dar, der bei mouseover sein erscheinungsbild ändert. die aufgabenstellung lautet nun: diesen ein eine vorhandene seite mehrfach einzubauen. ich habe es auch schon mit iframes versucht, aber auch dort stellte sich mir die aufgabe des mehrfachen einbaus... kann mir da bitte jemand mal auf die sprünge helfen? geht das überhaupt? wenn ja, woher bekomme ich mehr input?

MfG shivasun




<html>
<head>
<title>weitergehende-informationen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (weitergehende-informationen.psd) -->
<script type="text/javascript">
<!--

function newImage(arg) {
    if (document.images) {
        rslt = new Image();
        rslt.src = arg;
        return rslt;
    }
}

function changeImages() {
    if (document.images && (preloadFlag == true)) {
        for (var i=0; i<changeImages.arguments.length; i+=2) {
            document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
        }
    }
}

var preloadFlag = false;
function preloadImages() {
    if (document.images) {
        weitergehende_informatione_01_over = newImage("Bilder/weitergehende-informatio-02.gif");
        preloadFlag = true;
    }
}

// -->
</script>
<!-- End Preload Script -->
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">
<div style="position: absolute; top: 0; left: 0; width: 200; height: 28">
<!-- ImageReady Slices (weitergehende-informationen.psd) --><a href="#"
    onmouseover="changeImages('weitergehende_informatione_01', 'Bilder/weitergehende-informatio-02.gif'); return true;"
    onmouseout="changeImages('weitergehende_informatione_01', 'Bilder/weitergehende-informatione_.gif'); return true;"
    onmousedown="changeImages('weitergehende_informatione_01', 'Bilder/weitergehende-informatio-02.gif'); return true;"
    onmouseup="changeImages('weitergehende_informatione_01', 'Bilder/weitergehende-informatio-02.gif'); return true;"><img name="weitergehende_informatione_01" src="Bilder/weitergehende-informatione_.gif" border="0" alt="" width="200" height="25"></a>
<!-- End ImageReady Slices -->
</div>
</body>
</html>
22.12.2005 16:16:46
  Zitieren
Validome
Administrator

Registriert: 04.04.2005
Beiträge: 313
Hallo,
http://de.selfhtml.org/javascript/beispiele/buttons.htm lesen und lernen ;-))

mfg
Thomas Mell
22.12.2005 17:26:09
  Zitieren
shivasun
Mitglied

Registriert: 22.12.2005
Beiträge: 6
danke, das ging aber schnell! lernen ist schließlich wie rudern, hörst du auf treibst du zurück...;-)
22.12.2005 17:48:15
  Zitieren
shivasun
Mitglied

Registriert: 22.12.2005
Beiträge: 6
halloooooo,

habe geübt- funktioniert  >33%  also nur sehr eingeschränkt! der erste button verschwindet fluchtartig wenn man sich nähert, der zweite bleibt hängen , und der dritte funktioniert tadellos&#8230;

aber ich gebe nicht auf...


<html>
<head>
<title>Dynamische grafische Buttons</title>
<script type="text/javascript">
Normal1 = new Image();
Normal1.src = "weitergehende-information.gif";     
Highlight1 = new Image();
Highlight1.src = "weitergehende-informatio-02.gif";

Normal2 = new Image();
Normal2.src = "weitergehende-information.gif";   
Highlight2 = new Image();
Highlight2.src = "weitergehende-informatio-02.gif";

Normal3 = new Image();
Normal3.src = "Bilder/weitergehende-informationen.gif";     
Highlight3 = new Image();
Highlight3.src = "Bilder/weitergehende-informatio-02.gif";

function Bildwechsel (Bildnr, Bildobjekt) {
  window.document.images[Bildnr].src = Bildobjekt.src;
}
</script>
<style type="text/css">
h1 { color:#FFFFFF; font-family:Arial,sans-serif; }
p  { color:#FFFFFF; font-family:Arial,sans-serif; }
</style>
</head>
<body bgcolor="#FFFFC0" background="buttonsback.gif">

&nbsp;

<table border="0" cellpadding="0" cellspacing="0" width="346"><tr>
<td valign="top" width="200">

<a href="#"
   onmouseover="Bildwechsel(0, Highlight1)"
   onmouseout="Bildwechsel(0, Normal1)"><img src="Bilder/weitergehende-informationen.gif"
   width="200" height="25" border="0" alt="info"></a><br>
<br>
<br>

</td>
</tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" width="346"><tr>
<td valign="top" width="200">

<br>
<a href="#"
   onmouseover="Bildwechsel(1, Highlight2)"
   onmouseout="Bildwechsel(1, Normal2)"><img src="Bilder/weitergehende-informationen.gif"
   width="200" height="25" border="0" alt="info"></a><br>
<br>

</td>
</tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" width="346"><tr>
<td valign="top" width="200">

<br>
<br>
<a href="#"
   onmouseover="Bildwechsel(2, Highlight3)"
   onmouseout="Bildwechsel(2, Normal3)"><img src="Bilder/weitergehende-informationen.gif"
   width="200" height="25" border="0" alt="info"></a><br>

</td>
</tr>
</table>

</body>
</html>
22.12.2005 20:26:39
  Zitieren
shivasun
Mitglied

Registriert: 22.12.2005
Beiträge: 6
halloooooo,

ein erfolgserlebnis! es funktioniert! beharlichkeit hat doch was gutes hi hi...

-->kleiner denkfehler grosse wirkung<--

ab jetzt gibt es keine flüchtenden buttons mehr!

bleibt nur noch eine frage: gibt es ein mittel um die gif`s nach dem "rollover" wieder simultan laufen zu lassen?

mfg

shivasun

<html>
<head>
<title>Dynamische grafische Buttons</title>
<script type="text/javascript">
Normal1 = new Image();
Normal1.src = "Bilder/rollover/w-info01o.gif";     
Highlight1 = new Image();
Highlight1.src = "Bilder/rollover/w-info01s.gif";

Normal2 = new Image();
Normal2.src = "Bilder/rollover/w-info02o.gif";   
Highlight2 = new Image();
Highlight2.src = "Bilder/rollover/w-info02s.gif";

Normal3 = new Image();
Normal3.src = "Bilder/rollover/w-info03o.gif";     
Highlight3 = new Image();
Highlight3.src = "Bilder/rollover/w-info03s.gif";

function Bildwechsel (Bildnr, Bildobjekt) {
  window.document.images[Bildnr].src = Bildobjekt.src;
}
</script>
<style type="text/css">
h1 { color:#FFFFFF; font-family:Arial,sans-serif; }
p  { color:#FFFFFF; font-family:Arial,sans-serif; }
</style>
</head>
<body bgcolor="#FFFFC0" background="buttonsback.gif">

&nbsp;

<table border="0" cellpadding="0" cellspacing="0" width="346"><tr>
<td valign="top" width="200">

<a href="#"
   onmouseover="Bildwechsel(0, Highlight1)"
   onmouseout="Bildwechsel(0, Normal1)"><img src="Bilder/rollover/w-info01o.gif" border="0" alt="info" width="200" height="25"></a><br>
<br>
<br>

</td>
</tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" width="346"><tr>
<td valign="top" width="200">

<br>
<a href="#"
   onmouseover="Bildwechsel(1, Highlight2)"
   onmouseout="Bildwechsel(1, Normal2)"><img src="Bilder/rollover/w-info02o.gif" border="0" alt="info" width="200" height="25"></a><br>
<br>

</td>
</tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" width="346"><tr>
<td valign="top" width="200">

<br>
<br>
<a href="#"
   onmouseover="Bildwechsel(2, Highlight3)"
   onmouseout="Bildwechsel(2, Normal3)"><img src="Bilder/rollover/w-info03o.gif" border="0" alt="info" width="200" height="25"></a><br>

</td>
</tr>
</table>

</body>
</html>
22.12.2005 21:26:35
  Zitieren
Validome
Administrator

Registriert: 04.04.2005
Beiträge: 313
Hallo,
was meinst Du mit "simultan" ? Kann man sich die Sache online ansehen ?

mfg
Thomas Mell
23.12.2005 01:32:04
  Zitieren
shivasun
Mitglied

Registriert: 22.12.2005
Beiträge: 6
hallo thomas

leider ist meine seite noch nicht online, das dauert auch bestimmt noch bis februar, sie ist zwar schon fertig bis auf...

...aber ich arbeite daran!

simultan soll heißen, daß ich die animierten gif`s nach dem rollover gerne wieder im gleichschritt hätte...

da ich diese aufgabe noch nicht gelöst habe, kann ich meinen zukünftigen besuchern das auch nicht antun...

eine idee?
10.01.2006 23:56:40
  Zitieren
Mr.Martin
Gast
HHallo habe mal ne frage ich habe das mir jetzt schon ein par mal durch gelesen wie man so ein rollover schreibt. aber ich bekomme das nicht hin. könnt ihr mir da einen code schreiebn ?

Sandertbild:

http://www.oyla18.de/userdaten/75861662/bilder/nocheat.gif

Bild wenn der Mauszeiger drüber steht :

http://www.oyla18.de/userdaten/75861662/bilder/cheater.gif

Danke schon mal ;)
30.11.2006 19:19:28
  Zitieren
HTMELL
Administrator

Registriert: 11.05.2006
Beiträge: 544
Hallo,
den Link für so etwas hatte ich bereits weiter oben gepostet...

_______________________________________
mfg
Thomas Mell

www.validome.org
30.11.2006 20:40:14
  Zitieren
Mr.Martin
Gast
Ja das weis ich aber darauß werde ich nicht schlau. deshalb wollte ich fragen ob mir jemand mal das fertig schreiben könnte und ich das dan nur noch kopieren und einfügen brauch.
30.11.2006 20:42:42
  Zitieren
Mr.Martin
Gast
Kann mir den keiner helfen ;(
04.12.2006 15:04:33
  Zitieren
Mr.Martin
Gast
bitte leute es ist wichtig!!!!!!!!!!!
05.12.2006 20:18:56
  Zitieren
Markenbobby
Gast
und wenn ich da drauf gehe mit der maus dann ist da so eine änderung zu erkennen aber der button wird im header angezeigt bzw. der header ist durch den button ersetzt worden
28.04.2007 18:43:33
  Zitieren
PinControl
Gast
Tach zusammen!

Wenn bei euch die Buttons irgendwo anderst oder verschoben oder dergleichen erscheinen / sich veränder liegt das zimlich sicher an der reihenfolge der bilder!

onmouseover="Bildwechsel(2, Highlight1)"
onmouseout="Bildwechsel(2, Normal1)"

----> dieses Beispiel mein das 3te Bild, es fängt bei 0 an, es kann auch sein das ihr bilder habt die ihr nicht wechseln wollt, die aber trozdem dazu zählen (zb im header) dann fängt ihr halt entsprächend später an zu zählen!


GrüSse Pin
23.01.2008 16:57:01
  Zitieren
Seiten: 1   Beitrag schreiben
Wechsel zu

Die letzten Beiträge aus diesen Forum

Valid HTML 4.01