• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Mouseover UND Pop-Up Fenster?

L

Lola93

Neues Mitglied
Hallo,

ich erstelle zur Zeit eine html-Seite für die Schule zu einem Thema, womit dann in den kleineren Jahrgangsstufen gearbeitet werden kann.

Zu meinem Problem:
Ich habe es mehr oder weniger hinbekommen, dass sich ein Pop-Up Fenster öffnet wenn ein Bild angedrückt wird.
Ebenfalls habe ich hinbekommen ein Mouseover zu diesem Bild zu erstellen.

Aber ich hätte gern beides verknüpft. Also: Wenn man mit dem Mauszeiger über das Bild geht, soll ein anderes Bild erscheinen. Wenn man auf das Bild draufdrückt soll sich ein Pop-Up Fenster mit neuem Inhalt öffnen.

Es will mir einfach nicht gelingen. Was kann ich machen damit sich "die_seite_wo_es_hingehen_soll.html" in einem pop up fenster öffnet?

HTML: 
<a href="die_seite_wo_es_hingehen_soll.html" onmouseover="austausch1.src='das_bild_zum_austauschen.gif';" onmouseout="austausch1.src='das_normale_bild.png';"><img src="das_normale_bild.png" border="0" name="austausch1">

Ich wäre so unglaublich dankbar für Hilfe. Ich arbeite schon ein viertel Jahr an dieser Seite und jetzt hänge ich schon seit einiger Zeit.

Liebe Grüße Lola :-)
 
Hallo,

und willkommen im Forum.
Das sieht mehr sehr nach einem Menü aus, will mich da aber ohne Code nicht festlegen. Du kannnst den Bildaustausch per CSS realisieren und das zu einer neuen Seite gesprungen wird ist auch nichts aussergewöhnliches.
Es wäre gut wenn du mal deinen Code hier reinstellen könntest und wenn du ein Link zu der Seite hättest, damit man sich das mal ansehen kann.
 
Damit ein Link draus wird, fehlt </a> am Ende, und damit es ein Popup wird fehlt das target.

Code: 
[COLOR=#008000]<a href=[COLOR=#0000ff]"die_seite_wo_es_hingehen_soll.html" target="_NEW"[/COLOR] onmouseover=[COLOR=#0000ff]"austausch1.src='das_bild_zum_austauschen.gif';"[/COLOR] onmouseout=[COLOR=#0000ff]"austausch1.src='das_normale_bild.png';"[/COLOR]>[/COLOR][COLOR=#800080]<img src=[COLOR=#0000ff]"das_normale_bild.png"[/COLOR] border=[COLOR=#0000ff]"0"[/COLOR] name=[COLOR=#0000ff]"austausch1"[/COLOR]>[/COLOR]</a>
 
Hallo, und schon mal danke für eure Antoworten. Da muss ich vergessen haben das </a> reinzukopieren, im Orginal ist es jedenfalls da.

Die Seite ist nicht online und wird auch nicht online gestellt, sondern wenn sie fertig ist auf CDs gebrannt, die dann alle Schüler mit nach Hause nehmen können.

Ich wüsste nicht welchen Code ich hier jetzt reinkopieren soll. Alles ist bisschen viel, es sind ja auch viele andere Elemente schon auf der Seite.

Ich hab mal eine sache rausgeschnitten, wie ich das mouseover gemacht habe. das geht wunderbar. Jetzt möcht ich aber, dass wenn man draufdrückt, eine Seite nicht im neuen Fenster, sondern mit einem popup öffnet.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta name="author" content="Sina">
<meta name="editor" content="html-editor phase 5">
</head>
<script
language="JavaScript">
<!--
button1= new Image();
button1.src = "start1.png"
button2= new Image();
button2.src = "start2.png"
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
//-->
<body>
</script>
<p align="right"><a href="4.html"
onmouseover="austausch2.src='start2.png';"
onmouseout="austausch2.src='start1.png';">
<img src="start1.png" border="0" name="austausch2"></a></p>
</body>
</html>

Das Popup hab ich mit dem Popup generator aus dem Internet gemacht: So:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta name="author" content="Sina">
<meta name="editor" content="html-editor phase 5">
<script language="javascript" type="text/javascript">
<!--
var win=null;

onerror = stopError;
function stopError(){
        return true;
}


function i1325160106(){
        myleft=20;
        mytop=20;
        settings="width=640,height=480,top=" + mytop + ",left=" + myleft + ",scrollbars=no,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no,dependent=no";
        win=window.open("http://www.","mypopup",settings);
        win.focus();

}
// -->
</script>


</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<input type="button" value="NewPopup" onClick="i1325160106();">

</body>
</html>

Aber das hilft mir ja nicht wirklich weter. Ich bekomm die beiden Dinge einfach nicht miteinander kombiniert.

Danke für eure Hilfe. Wenn ihr noch was anderes wissen wollt oder noch mehr vom Code braucht (bin mir aber ziemlich sicher, was anderes wichtiges ist noch nicht da), dann meldet euch einfach nochmal.

Lola
 
Zuletzt bearbeitet:
Und was soll es werden?
Bildergalerie oder Menü oder was?

Hast du keine CSS-Datei?
 
Also, ich weiß es irgendwie auch nicht. Dachte das ist nicht weiter von Bedeutung.
Es ist so: Man drückt auf das Bild eines Landes und dann sollte sich ein popup fenster öffnen. In diesem soll etwas über das Land stehen. Dann sollte man das schließen. Ich weiß nicht als was man das bezeichnen könnte :oops:

eine css datei hab ich nicht. ist die denn wichtig? bisher ging alles gut ohne, hatte mich damals dazu belesen, aber nicht so richtig verstanden.:shock:

Edit:
Ich hab es jetzt eigl so hinbekommen wie ich wollte *juchu*. Ob das die feine Art ist, sei mal dahingestellt. Jedenfalls hab ich doch noch ein kleines Problem. Ich kann jetzt zwar Text in das Pop-Fenster schreiben, aber keine Bilder. Da stellt sich mir die Frage wieso? Ich war der Meinung man musste " und ' durch \ kennzeichnen, aber das wollte er mir trotzdem nicht ausgeben. Könnt ihr mir vllt sagen wieso?

<HTML><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta name="author" content="Sina">
<meta name="editor" content="html-editor phase 5">
</head>
<script
language="JavaScript">
<!--
button1= new Image();
button1.src = "beenden.png"
button2= new Image();
button2.src = "beenden2.png"
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
//-->
</script>
<script language="JavaScript">
function popup(w,h,site) {
x = screen.availWidth/2-w/2;
y = screen.availHeight/2-h/2;
var popupWindow = window.open(
'','','width='+w+',height='+h+',left='+x+',top='+y+',screenX='+x+',screenY='+y);
popupWindow.document.write(site);
}
</script>
<body>

<p align="right"><a href="javascript:popup(800,500,'<html>Hier steht Text </html>')"
onmouseover="austausch2.src='start2.png';"
onmouseout="austausch2.src='start1.png';">
<img src="start1.png" border="0" name="austausch2"></a>
</body>
</html></HTML>
 
Zuletzt bearbeitet:
Falls du so was wie das hier Stu Nicholls | CSSplay | Mapping the British Isles meinst. Das wird mit CSS gelöst, ginge natürlich auch mit Javascript.
Eine CSS Datei enthält die Informationen für die Darstellung einer Html Datei. Dort werden die Schriften, Farben, Rahmen, Positionen und Hintergrundbilder festgehalten, halt alles was man so brauch, wenn man eine Webseite herstellt. Ich versteh gar nicht wie du ohne auskommst?

Hilfe dazu findest du unter diesen Links:
Tutorials - HTML.net
CSS - berblick

Bitte erst einfach mal lesen zum Verständnis, was es mit CSS und Html auf sich hat.
 
Zuerst mal muss man sagen, was du da machen willst ist identisch zu Werbeeinblendungen auf derartig vielen Seiten, dass nahezu alle Popup-Blocker die Funktion blockieren, auch dann, wenn du (ausnahmsweise) den User nicht mit Werbung langweilen willst.
Der nächste Punkt, der mich persönlich unglaublich stört ist, wenn eine Webseite meint, sie muss die Position und Grösse meines Browsers ändern.
Windows erlaubt sowieso nicht, dass ein Popup im Vordergrund erscheint, das bleibt schön hinter meinen anderen Fenstern, und wird mit Rechtsklick in der Taskbar geschlossen, ohne dass ich es überhaupt gesehen habe.
Wenn die Seite ohne dieses Popup nicht funktioniert, ist das nicht mein Problem, es gibt 1000 andere Seiten, wo derselbe Inhalt ohne nervtötende Popups angeboten wird, oder in kurz, mich hast du als potentiellen User an der Stelle schon verloren.

Seis drum, wenn du das trotzdem so machen willst, egal ob mit oder ohne CSS, dann kannst du in der Zeile

javascript:popup(800,500,'<html>Hier steht Text </html>')

statt "Hier steht Text" natürlich auch jeden beliebigen anderen Inhalt rein schreiben, inkl. Bilder und sonstwas, denn was da zwischen <html> und </html> steht ist ganz schlicht eine vollständige Webseite.
Aufpassen musst du nur mit Anführungszeichen und Hochkommas im Inhalt, weil die schon in der Aufruf-Zeile verwendet werden, sprich die musst du escapen.

Viel einfacher wäre natürlich eine zweite Seite, nennen wir sie mal popup.html.
Dann kannst du dir das ganze JavaScript sparen und machst einfach nur

Code: 
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="author" content="Sina">
<meta name="editor" content="html-editor phase 5">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<p align="right"><a href="./popup.html" target="_NEW"
onmouseover="austausch2.src='start2.png';"
onmouseout="austausch2.src='start1.png';">
<img src="start1.png" border="0" name="austausch2"></a>
</body>
< /html>

In der popup.html kannst du dann wie gewohnt einfaches HTML schreiben.

Code: 
<!DOCTYPE html>
<html>
<head>
<title>Mein Popup</title>
</head>
<body>
<p>
Hier steht Text
</p>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben