Bilder in Popups öffnen
0 
Felix Riesterer
0 0 at
Bilder in Popups öffnen
Hi, ich hab mal folgendes Skript gefunden:
<script language="JavaScript">
<!--
/**
* Javascript Window Popper V1.01
* ------------------------------
* Browser unabhängiger Fenster öffner
*
* Methoden:
*
* 1) popup( url, width, height, top, left, name, features )
*
* Öffnet ein neues Fenster mit der angegebenen URL, Breite und Höhe. Das Fenster wird
* auf dem Bildschirm zentriert, wenn die Angaben top und left fehlen.
*
* Wenn kein Name angegeben wird, wird ein eindeutiger Name automatisch generiert.
* Falls keine Features angegeben werden, erhält das Fenster auch keine. Wenn ein Feature
* gewünscht wird, kann dieses einfach durch seinen Namen angegeben werden.
*
* Unterstützte Features sind:
* toolbar, scrollbars, menubar, resizeable, status, location, directories
*
* Beispiel: popup( "help.html", 420, 420, null, null, "help", "scrollbar" );
*
* Variablen:
*
* 1) defaultWidth Voreingestellte Breite, falls der Parameter bei width popup() fehlt
*
* 2) defaultWidth Voreingestellte Höhe, falls der Parameter height bei popup() fehlt
*
*/
var defaultWidth = 580;
var defaultHeight = 420;
// --------------------------------------------------------------------------------------
// private
var count = 0;
// popup( url, <name>, <features>, width, height, top, left )
function popup( url, width, height, top, left, name, features )
{
if( width == null ) width = defaultWidth;
if( height == null ) height = defaultHeight;
if( document.all )
{
availWidth = window.screen.availWidth;
availHeight = window.screen.availHeight;
if( top == null ) top = ",top=" + ( availHeight / 2 - height / 2 ); else top = ",top=" + top;
if( left == null ) left = ",left=" + ( availWidth / 2 - width / 2 ); else left = ",left="+ left;
}
else
{
if( top == null ) top = (screen.height) ? ",screenY=" + (screen.height / 2 - height / 2 ) : ""; else top = ",screenX="+ top;
if( left == null ) left = (screen.width) ? ",screenX=" + (screen.width / 2 - width / 2 ) : ""; else left = ",screenY="+ left;
}
tmp = ""
if( features != null && typeof( features ) == "string" ) {
tmp = "toolbar=" + ( features.indexOf("toolbar") > - 1 ? "yes" : "no" ) + ",";
tmp += "scrollbars=" + ( features.indexOf("scrollbar") > - 1 ? "yes" : "no" ) + ",";
tmp += "menubar=" + ( features.indexOf("menubar") > - 1 ? "yes" : "no" ) + ",";
tmp += "resizable=" + ( features.indexOf("resizable") > - 1 ? "yes" : "no" ) + ",";
tmp += "status=" + ( features.indexOf("status") > - 1 ? "yes" : "no" ) + ",";
tmp += "location=" + ( features.indexOf("location") > - 1 ? "yes" : "no" ) + ",";
tmp += "directories=" + ( features.indexOf("directories") > - 1 ? "yes" : "no" ) + ",";
features = tmp+"width="+ width +",height="+ height + top + left;
} else {
features = "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,"
+ "resizable=no,width="+ width +",height="+ height + top + left;
}
// alert( features );
if( name == null ) {
id = count + Math.floor( Math.random() * 8192 );
name = "Win"+id;
}
win = window.open( url, name, features);
count++;
if( win ) {
win.focus();
}
}
//-->
</script>
Allerdings komm ich damit nicht klar. Momentan hab ich die Links folgendermaßen gelöst: (Ich hätte auch noch ganz gern ein "Schließen-Button" oder besser noch auf das Bild im Popup klicken um zu schließen, aber ich glaub das ist nicht so einfach umsetzbar)
<a href="http://xyz.jpg" onClick="pop = window.open
(this.href,'a', 'width=820,height=624,scrollbars=auto,top=100,left=120');
pop.focus(); return false;" onFocus="this.blur()">
Allerdings weiß ich nich 100%ig wie dies funktioniert, wofür ist z.B. der Name 'a' ?
Sollte man eigentlich CSS oder JS script-Tags als Kommentar oder ohne Kommentar schreiben?
Noch ein Problem, ich habe folgendes Bild in einer Tabelle, wollte aber ganz gern, dass wenn man auf den unteren Balken geht, dieser sich komplett blau verfärbt. Ist aber glaub auch nur schwer lösbar.
<table bgcolor="#E1E1E1">
<tr>
<td style="width:140px;background-color:#C0C0C0;text-align:center">
<img src="http://bla.jpg" width="140" height="105" style="border:2px solid blue;cursor:pointer"
onClick="bild.src='http:bla.jpg';" onFocus="this.blur()">
<a href="http://blub.jpg" onClick="pop = window.open
(this.href,'a', 'width=820,height=624,scrollbars=auto,top=100,left=120');
pop.focus(); return false;" onFocus="this.blur()">
<font size="2" face="Arial"><b> Großes-Bild </b></font></a>
</td>
<tr>
<td bgcolor="#E1E1E1">
<b class="spiffy">
<b class="spiffy5"></b>
<b class="spiffy4"></b>
<b class="spiffy3"></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy1"><b></b></b></b>
<br>
</td>
</tr>
</table>
Hier das dazugehörige CSS-Skript:
.spiffy{display:block}
.spiffy *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#c0c0c0}
.spiffy1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #d2d2d2;
border-right:1px solid #d2d2d2;
background:#c8c8c8}
.spiffy2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #dddddd;
border-right:1px solid #dddddd;
background:#c6c6c6}
.spiffy3{
margin-left:1px;
margin-right:1px;
border-left:1px solid #c6c6c6;
border-right:1px solid #c6c6c6;}
.spiffy4{
border-left:1px solid #d2d2d2;
border-right:1px solid #d2d2d2}
.spiffy5{
border-left:1px solid #c8c8c8;
border-right:1px solid #c8c8c8}
.spiffyfg{
background:#c0c0c0}
Dieses Skript bräuchte ich dann halt in zweifacher ausführung, eines noch in blau.
Ich hoffe, dass ihr nachvollziehen könnt was ich mein.
-
-
Lieber Mark,
Popups sind böse! Tu es einfach nicht!
Alternativen:
* jsPopup (von mir)
* Lightbox
* Lightbox2Liebe Grüße aus Ellwangen,
Felix Riesterer.
Super vielen Dank erstmal, sehr schöne Popups! (hast du vielleicht noch mehr davon?)
...Aber weiso sind Popups böse?? (ich will sie ja nicht automatisch öffnen lassen, auch wenn ich wüsste wie dies geht)
Kannst du bitte noch folgendes beantworten:
Sollte man eigentlich CSS oder JS script-Tags als Kommentar oder ohne Kommentar schreiben?
Und noch die Frage wegen der Tabelle. Hast du vielleicht grad ne Lösung parat wie ich dies umsetzen kann. Am liebsten schon so mit CSS, wie's mit Grafiken ginge ist mir klar.
Also wenn ich über den unteren grau hinterlegten Teil mit der Maus gehe soll dieser sich blau verfärben!-
Hallo.
Sollte man eigentlich CSS oder JS script-Tags als Kommentar oder ohne Kommentar schreiben?
Man sollte sie in externe Dateien auslagern, so dass sich diese Frage erübrigt.
Also wenn ich über den unteren grau hinterlegten Teil mit der Maus gehe soll dieser sich blau verfärben!
Klingt nach einem Fall für die Pseudoklasse
:hover.
MfG, at
-
-