Fenster öffnen

[f1r3ba11]

Hi,

Müsste mal wissen (Hab noch keinen Quellcode), wie man folgendes am einfachsten hinbekommt:

1. nach dem drücken auf ein wort auf der website ("anfahrt"), soll sich ein relativ kleines fenster öffnen (250x500px) in der die anfahrtskizze zu sehen ist (ohne menüleisten scrollbars...nur das fenster)

2. bilder die per <div> positioniert sind (sehr klein, 60x60px), sollen, wenn man mit den mauszeiger darüberbewegt, größer (400x400) an einer bestimmten position der seite zu sehen sein. (oder auch immer an derselben, etwa mittig)

...positionieren mit <div> klappt schon gut und stellt kein problem dar.

liebe grüße,

f1r3ba11

[c0de]

HEy fir3ball

1. nach dem drücken auf ein wort auf der website ("anfahrt"), soll sich ein relativ kleines fenster öffnen (250x500px) in der die anfahrtskizze zu sehen ist (ohne menüleisten scrollbars...nur das fenster)

entweder Klassischen Pop-up, wird allerdings bei den Meisten nicht sichtbar sein dar geblockt, oder z.b. Mit der jQuery UI ein Overlayer öffnen.

2. bilder die per <div> positioniert sind (sehr klein, 60x60px), sollen, wenn man mit den mauszeiger darüberbewegt, größer (400x400) an einer bestimmten position der seite zu sehen sein. (oder auch immer an derselben, etwa mittig)

Auch hier kann ich dir jQuery empfehlen!

Oder auch alles andere ^^
Dafür gibt es einige Lösungen und Google wird dir sicher gerne dabei helfen!

L.g.

[Deus Figendi]

1. nach dem drücken auf ein wort auf der website ("anfahrt"), soll sich ein relativ kleines fenster öffnen (250x500px) in der die anfahrtskizze zu sehen ist (ohne menüleisten scrollbars...nur das fenster)

Ich empfehle dem Benutzer zu überlassen wie groß/klein und mit wie viel Menüs er seine Fenster haben möchte und einfach als target _blank anzugeben.
Das funktioniert aber natürlich nur in HTML-Varianten, die Frames unterstützen.
Ansonsten geht nur JavaScript und damit fallen eben alle Benutzer raus, die dieses deaktiviert haben. Ich bin nicht sehr gut in JS aber vielleicht wäre es möglich in dem geöffneten Fenster mit der Anfahrtsskitze die entsprechenden Operationen (Fenstergröße, Menüleisten...) umzusetzen. So öffnet sich für alle das Fenster und für Leute mit aktiviertem JS eben mit deinen Optionen. Aber wie gesagt... kann man eigentlich auch dem Benutzer überlassen (eigentlich kann man sogar "öffnen in neuem Fenster" dem Benutzer überlassen, ich mache das ständig).

2. bilder die per <div> positioniert sind (sehr klein, 60x60px), sollen, wenn man mit den mauszeiger darüberbewegt, größer (400x400) an einer bestimmten position der seite zu sehen sein. (oder auch immer an derselben, etwa mittig)

Mit CSS eigentlich unkompliziert, insbesondere wenn es sich um das gleiche Bild handelt...

.bild {  
 width:60px;  
 height:60px;  
}  
.bild:hover {  
 width:400px;  
 height:400px;  
}

Wenn es zwei Bilder sind wird es etwas komplizierter, dann nämlich musst du beide Bilder in einem Container unterbringen, das größere blendest du ersteinmal aus. Wenn der Container gehovert wird blendest du das größere ein. Etwa so (ungetestet).

<div class="container">  
 <img class="thumbnail" src="./kleinesBild.gif" />  
 <img class="bild400" src="./grossesBild.png" />  
</div>

.container .bild400 {  
 position:fixed;  
 left:50px;  
 top:50px;  
 display:none;  
}  
.container:hover .bild400 {  
 display:block;  
}

...oder so.

[f1r3ba11]

Danke, vielen dank!

Irgendwas mach ich noch falsch.

2. bilder die per <div> positioniert sind (sehr klein, 60x60px), sollen, wenn man mit den mauszeiger darüberbewegt, größer (400x400) an einer bestimmten position der seite zu sehen sein. (oder auch immer an derselben, etwa mittig)
   Mit CSS eigentlich unkompliziert, insbesondere wenn es sich um das gleiche Bild handelt...
   .bild {
   width:60px;
   height:60px;
   }
   .bild:hover {
   width:400px;
   height:400px;
   }

Das muss ja dann in den head-bereich oder?

und wie sieht dann der <div> tag dazu aus (positioniert und mit hover-effekt versehen)?

meinetwegen wenn das bild "ofen.jpg" heisst?

Ty,

[Deus Figendi]

Das muss ja dann in den head-bereich oder?

Das muss in deinen Style-Bereich, ob der sich im HTML-Header oder in einer externen Datei befindet überlasse ich dir.

und wie sieht dann der <div> tag dazu aus (positioniert und mit hover-effekt versehen)?

Gar nicht, das div-Element benötigst du in der ersten Variante eigentlich nicht. Wenn du die gleiche Datei refferenzierst musst du auch keine zwei img-Elemente in einem div-Element gruppieren.

Das div-Element dient in der zweiten Variante dazu die beiden Bilder zu gruppieren, damit man sie mit einem gemeinsamen hover ansprechen kann.

meinetwegen wenn das bild "ofen.jpg" heisst?

  
<html>  
<head>  
<title>Ohne Worte...</title>  
<style type="text/css">  
img.vergroesserbares_bild {  
 width:60px;  
 height:60px;  
}  
img.vergroesserbares_bild:hover {  
 width:400px;  
 height:400px;  
 position:relative;  
 left: -200px;  
 top:-200px;  
}  
</style>  
</head>  
<body>  
<img class="vergroesserbares_bild" src="./ofen.jpg" alt="Ein Ofen mit gruenen Kacheln aus dem Barock" />  
</body>  
</html>

Oder so... du weißt aber schon dass das hier das SELF ist!?

[apsel]

Om nah hoo pez nyeetz,

zu 1. Felix Riesterers Ligthbox.

Matthias