Mouseover / Rollover mit html statt mit Grafiken

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Liebe/-r Experte/-in,

Hi! Und zwar möchte ich ein Mouseover bzw. Rollover mit einer html Seiten basteln Das heist zuerst sollte normal das bild erscheinen und wenn ich mit der Mouse über das bild gehe sollte sich statt ein Bild einfach eine html seite in sich selbst öffnen!
Mit 2 Bildern bekomme ich das hin!

Und zwar sieht das so aus:

<!-- Begin
loadImage1 = new Image();
loadImage1.src=„http://www.meinehp.de/rollover.png“;
staticImage1 = new Image();
staticImage1.src=„http://ww.meinehp.de/normal.png“;
// End -->

Kann mir einer sagen wie das funktionert?

#2

Ich würde versuchen dies per eigenem und dem Attribut style=„display:block/none“ umzusetzen. Per Z-Index kannst du versuchen, dieses DIV über dem Rest als eigenes Bild anzuzeugen.
Hier ein wenig Beispielcode, der dir den Start in die Materie ein wenig verdeutlichen soll. Muss natürlich weiterführend angepasst werden. :smile:

function ShowDiv(element){
element.style.display = ‚block‘;
}

<img src=„myimage.png“ onmouseover=„ShowDiv(top)“/>
<div id=„top“ z-index=„20“ style=„position:absolute; top:0px; left:0px; display:none“>
MEIN ANZUZEIGENDER HTML CODE!
</div>

Mit 2 Bildern bekomme ich das hin!

Und zwar sieht das so aus:

<SCRIPT LANGUAGE=„JavaScript“>
<!-- Begin
loadImage1 = new Image();
loadImage1.src=„http://www.meinehp.de/rollover.png“;
staticImage1 = new Image();
staticImage1.src=„http://ww.meinehp.de/normal.png“;
// End -->

Kann mir einer sagen wie das funktionert?

#3

Hi !

Habe es versucht aber es funktioniert nicht!

Ich erstelle meine Seiten mit iweb!

Sieht jetzt wie folgt aus:

function ShowDiv(element){
element.style.display = ‚block‘;
}

<img src=„http://www.meinehomepage.de/Navigation/news.png“ onmouseover=„ShowDiv(top)“/>
<div id=„top“ z-index=„20“ style=„position:absolute; top:0px; left:0px; display:none“>
http://www.meinehomepage.de/Go/probe.html
</div>

Was mach ich faltsch?
Könnten Sie mir es so fertig machen das ich es gleich verwenden kann?

Ich öffne in iweb ein iframe und füge diesen code hinein doch leider geht es nicht!

Sorry aber hoffe Sie können mir weiterhelfen!

#4

…hmmmm.

Ich bin mir noch nicht ganz klar, wie du das meinst.

Ich könnte mir aber vorstellen. dass man so etwas mit einem evtl. lösen könnte, dort kann man auch ein mouseover bzw. mouseout-event triggern.

Kannst du den Part des Quelltexts posten, dann wird es mir vielleicht klarer.

Gruss
M. Weller

#5

Tut mir Leid. Ich kenne iWeb nicht genau. Aber wenn sie mal den folgenden Code in einer *.html Datei abspeichern und in Ihrem Browser aufrufen, dann sollten Sie zumindest mal Beisielhaft sehen, was ich denke, was Sie wollen. :smile:

function ShowDiv(){
document. getElementById(‚top‘).style.display = ‚block‘;
}
function HideDiv(){
document. getElementById(‚top‘).style.display = ‚none‘;
}

#6

Echt super funktioniert einwandfrei so! Ist genau so wie ich es mir vorgestellt habe!
Habe jetzt nur noch eine bitte :
Ich möchte jetzt nur noch auf die geöffnete Mouseover seite (in ihren fall google.de) zugreifen können so das ich z.B was suchen kann!

Ich habe für Sie hier mal ein Beispiel fertig gemacht:

Hier der link http://www.flashpartys.de/Go/Leer_2.html

Da habe ich mal beschrieben wie ich es meine!

Vielen Vielen Dank für ihre Hilfe!

Mit freundlichen Grüßen

Christian

#7

Hi Christian,

ich bin mir nicht sicher ob ich die Frage richtig verstanden habe, aber du willst doch wissen, wie du auf deiner Seite bei einem Mouseover über ein Bild ein zweites Bild anzeigen lassen kannst?

Wenn ja, dann solltest du einfach ein sichtbar werden lassen, dass du mit Hilfe des style-Attributs absolut positionierst (position: absolute:wink:.

Falls das nicht deine Frage war, dann bitte nochmal ganz präzise formulieren.

Viele Grüße
Florian

#8

Versuch einfach mal die onmouseout-Zuweisung in das DIV zu verschieben. Siehe Beispielcode.

function ShowDiv(){
document. getElementById(‚top‘).style.display = ‚block‘;
}
function HideDiv(){
document. getElementById(‚top‘).style.display = ‚none‘;
}

#9

Echt vielen vielen Dank!! Ohne ihre Hilfe wäre ich echt aufgeschmissen!
Jetzt habe ich nur noch eine Frage!

Hier habe ich noch mal ein Beispiel fertig gemacht wo alles beschrieben ist!

www.flashpartys.de/Go/Leer_2.html

#10

Vielleicht ist folgende lösung eher was für Sie. Alles was jetzt noch an Fragen von Ihrer Seite kommt würde zuweit führen. In diesem Fall empfehle ich eher eine Einarbeitung in die Materie. Entweder per gutem Buch oder bei http://de.selfhtml.org/

Beispielcode:

function ShowDiv(){
document.getElementById(‚top‘).style.display = ‚block‘;
}
function HideDiv(){
document.getElementById(‚top‘).style.display = ‚none‘;
}
function GoTo(url) {
document.getElementById(‚content‘).src = url ;
}

[- Google -](javascript:GoTo(‚http://www.google.de‘))
>
[- Bing -](javascript:GoTo(‚http://www.bing.de‘))
[- Yahoo -](javascript:GoTo(‚http://www.yahoo.de‘))

#11

Danke! Ja ich hab mir auch schon ein Buch bestellt!

Die Idee ist gut jedoch kann kann ich so das Design der Navigationsleiste nicht so schön anpassen! Gibt es keine möglichkeit auf meinen Wege?

Kann man nicht einfach einen Code schreiben den ich einfach auch wie ein Hyperlink in der Navigationsleiste verwende der mir ein bild anzeigt (wie z.B das Bild Januar ) und wenn ich dann auf das Bild drücke er mir die Seite dann so lädt wie ich es ihnen im Beispiel gebastelt habe?

Oder haben Sie noch ne bessere Lösung

Entschuldigen Sie bitte, ich möchte ja nicht betteln aber ich bekomme es wirklich nicht hin!

Es war auch dann die letzte Frage!

Schon mal vielen vielen Dank für alles!

#12

Der obige Code bildet Ihr beschriebenes Wunschverhalten genau ab. Wenn Sie Bilder anstatt der Texte möchten, müssen Sie den Text einfach durch ein Tag ersetzen.
Beispiel:
Ersetzen Sie
[- Google -](javascript:GoTo(‚http://www.google.de‘))

durch

#13

Danke funktioniert gut! Jetzt habe ich aber wieder ein problem mit dem onmouseout !!

Schauen Sie hier : http://www.flashpartys.de/Go/testlauf.html

#14

OK. Das ist die letzte Antwort. :smile:
Versuchen Sie bei DIV noch eine Höhe anzugeben. Zb. Height=„300“

Beispiel:

function ShowDiv(){
document.getElementById(‚top‘).style.display = ‚block‘;
}
function HideDiv(){
document.getElementById(‚top‘).style.display = ‚none‘;
}
function GoTo(url) {
document.getElementById(‚content‘).src = url ;
}

#15

Vielen Dank für ihre hilfe!
Jetzt klappt es das ich die bilder anklicken kann jedoch funktioniert die mouseout funktion nicht mehr!
Das Mouseover lässt sich öffnen geht aber nicht wieder weg! Habs jetzt über 4 Stunden versucht bekomm es aber nicht!
Ich bedanke mich bei ihnen für ihre Hilfe! Ohne Sie wäre ich nie so weit gekommen!

http://www.flashpartys.de/Go/testlauf.html

#16

Hallo heaman!
Ich habe mich jetzt das ganze wochenende mit dem html code beschäftigt und ich bin am verzweifeln!!!
Ich bekomme es nicht hin!
Ich kriege es nicht hin dass das mouseover wieder weg geht wenn ich von den bildern wieder runter gehe! es öffnet sich aber es schließt sich nicht wieder!
Das mit der height angabe geht nicht!
Ich habe aber rausbekommen wenn ich das onmouseout ohne height angabe zuordne geht es ja bis zum ersten bild! Und durch die angabe
entsteht immer eine lücke zwischen den bildern und die verhindert von bild zu bild zu gehen!

Könnten Sie mir bitte noch mal helfen???

Hier noch mal die Seite http://www.flashpartys.de/Go/testlauf.html

Und hier der Code:

function ShowDiv(){
document.getElementById(‚top‘).style.display = ‚block‘;
}
function HideDiv(){
document.getElementById(‚top‘).style.display = ‚none‘;
}
function GoTo(url) {
document.getElementById(‚content‘).src = url ;
}

Und könnten Sie mir bitte noch sagen warum dies nicht 100%ig im Internet Explorer funktioniert?

Mit freundlichen Grüßen

Christian Hahn

#17

Hallo heyman!
Könnten sie mir bitte bitte nur noch einmal helfen??
ich bekomme einfach den abstand zwischen den bildern nich weg! dudurch kann ich die unteren 2 bilder mit link nicht anklicken!

Schauen Sie bitte noch mal drüber!

http://www.flashpartys.de/Go/Leer_2.html

Hier der Code:

function ShowDiv(){
document.getElementById(‚top‘).style.display = ‚block‘;
}
function HideDiv(){
document.getElementById(‚top‘).style.display = ‚none‘;
}
function GoTo(url) {
document.getElementById(‚content‘).src = url ;
}

Ich würde mich echt sehr freuen !

Mit freundlichen Grüßen

Christian Hahn

#18

Sorry ich meinte http://www.flashpartys.de/Go/testlauf.html

#19

Hallo!
Habe mich lange nicht mehr eingeloggt, allerdings hätte ich die Antwort auch nicht geben können.
Hast du mittlerweile eine Lösung gefunden? Wenn ja, würde die mich interessieren.

Gruß Meike