bilder im popup öffnen

Venure · 19.12.2003, 22:21

Hi, wie kann ich es anstellen das ich kleine bilder jeweils in einem popup öffnen lassen kann,
ohne für jedes bild eine extra html seite zu machen .

Ich weiß nich wie die es gemacht haben --> Demo

die bilder sollen bei mir auch so aufgehen.

Am besten wäre es wenn ich aber für mehrere Bilder wie gesagt nur eine HTML Datei brauche.

Nightline · 20.12.2003, 12:35

Hallo!

Gleich zu Beginn deiner TP-Karriere ein Tipp: benutze die Suche oben rechts, deine Frage ist z.B. sehr häufig gestellt!

Hier die Lösung:

PHP-Code:


			
<html>

<head><title>Seite 1</title>

<script language="JavaScript 1.2" type="text/javascript">

function popup(url,name,size)

{

window.open(url,name,size);

}

</script>

</head>



<a href="java script: popup('deinbild.jpg','Bild1','width=400,height=600')">Bild</a>

</body>

</html>

Anmerkung: Das Wort java script im Code gehört OHNE Leerzeichen (also javascript, lässt sich leider nicht anders darstellen im Forum! Ebenfalls weglöschen musst du das Leerzeichen nach dem Doppelpunkt vor dem "popup".

Venure · 20.12.2003, 13:14

OK, danke.

Werd ich austesten.

Ja das mit der Suche ist allgemein bekannt.

Sorry. ^^

Werd mich dran halten.

Edit:

Ein Problem hätte ich dabei nur noch.

Hier --> Testseite

Die Bilder die aufrufen sind nicht genau oben und links angelegt.
Somt wenn ich die Fenster größe an das Bild anpasse, wird es nicht richtig angezeigt.

Habe versucht in das Script
,'leftmargin=0 ,'topmargin=0

Einzufügen, aber klappt nicht.
kann mir da noch mal einer weiterhelfen?

Dann bin ich vorerst wunschlos glücklich

-XasS- · 20.12.2003, 14:58

das ist doch lustig so. ich würds so lassen^^

Venure · 20.12.2003, 17:14

Lustig ??

Ach so, hab die Seite zu schnell down gemacht.

Sorry.

Hier --> Demo

seht ihr den aktuellen Status.

Das andere war meine Fehlerseite.

Tschuldigung

EDIT !!!!

Sorry ich weiß, viele Fragen.

Doch ich bräuchte auch dazu das das Fenster immer im Vordergrund bleibt...

Danke

-XasS- · 20.12.2003, 21:06

das ist aber doch jetzt so, wie du dir das gedacht hast, oder?
Ein selbstständiges PopUp.

Venure · 20.12.2003, 21:11

Ja klar.

ales bestens.

Nur 2 Sachen sind noch nicht so toll..

1. Die Bilder in dem Popup liegen nicht oben und links genau an.

2. Das Popup soll immer aktiv im Vordergrund bleiben.

Weil: Mann kann diese links aufrufen und dann erscheint das Popup, wenn man dann auf einen anderen Link klickt ändert sich ja das Bild im Popup, nur geht das Fenster dann in den Hintergrund, das will ich unterbinden, und immer zu und wieder neu aufmachen ist auch mist.

Verstanden was ich meine?

-XasS- · 20.12.2003, 21:17

ich glaube ja, dass es am einfachsten ist einfach ein Link auf ein Bild zu setzen. Dann braucht man noch nichtmal den JavaScript-Kram. Guckst Du:

Code:

<html>
<body>
<a href="bild.jpg" target="_blank">Hier mal klicken</a>
</body>
</html>

Wenn es irgendwelche Einwände hiergegen gibt, bitte bescheidsagen. Vielleicht geht das nicht mit allen Browsern oder so.
Wenn Du das Aussehen des PopUps hierzu noch verändern möchtest, dann probiere mal das hier aus:

Code:

<html>
<head>
<title>FensterTest</title>
<script language="JavaScript">
<!--
function neuesfenster(formular){
   var optionen="width=400,height=300,"
   for (var i=0; i<formular.elements.length; i++){
      if (formular.elements[i].checked) 
         optionen += "," + formular.elements[i].name
   }
   var fenster = window.open("", "neu", optionen)
   if (fenster != null){
      with (fenster.document){
         open()
         write("<"+"html"+">"+"<"+"body"+">")
	     write("Neues Fenster mit folgenden Optionen: "+optionen)
               //um Fensteroptionen anzuzeigen
		 write("<br><br><br>Und jetzt verpiss disch") //hier könnte jetzt Text stehen!!	
         write("<"+"a href='javascript:window.close()'"+">")
         write("<center>Fenster schließen"+"<"+"/a"+">")
         write("<"+"/body"+">"+"<"+"/html"+">")
		
         close()
      }
   }
}
//--></script>
</head>
<body bgcolor="#dbdbdb"><font face="Arial, Helvetica, sans-serif">
<h1>Fenster-Optionen auswählen</h1>
<form>
<input type="checkbox" name="dependent"> dependent<br>
<input type="checkbox" name="directories"> directories<br>
<input type="checkbox" name="hotkeys"> hotkeys<br>
<input type="checkbox" name="location"> location<br>
<input type="checkbox" name="menubar"> menubar<br>
<input type="checkbox" name="scrollbars"> scrollbars<br>
<input type="checkbox" name="status"> status<br>
<input type="checkbox" name="toolbar"> toolbar<br>
</form>
<a href="javascript:neuesfenster(document.forms[0])">Fenster erzeugen</a>
</font>
</body>
</html>

Das lässt sich dann noch verarbeiten.
Have Fun!!

-XasS- · 20.12.2003, 21:21

achso. dass das bild ganz oben links ist, musst du dann glaube ich mit css machen. ich mache das immer so, dass ich dann in minus-werte gehe.
d.h., zb.

Code:

<img src="das_bild.jpg" style="position: absolute; top: -40px; left: -40px;">

Da müsstest du dann rumprobieren. Inwieweit man über diese Einstellungen schon beim Link verfügen kann, weiß ich nicht.

Venure · 20.12.2003, 21:38

Das erste ist doch mist, Sorry. eine einfache blank seite ist nicht gerade was ich will.

Das 2 damit komm ich net klar, habs mal getestet, aber außer ein paar optionsschalter und fenster öffnen bei dem sich bei mir aber nichts tut ist auch nicht so das wahre.

Kann mir nicht jemand mal anhand meines bestehenden Codes sagen was ich wo und wie einsetzen muss damit die Bilder oben und links ganz anliegen im Popup und das dieser immer im Vordergrund bleibt, egal welcher link zuerst aufgerufen wird?

Danke,

Code:

<html>

<head>
<title>Rpg Town</title>
<style type="text/css">
body {background-color: #065781}
table {font-family: Verdana; font-size: xx-small; color: #000000; text-decoration: none}
a:active {color: #000000; text-decoration: underline}
a:hover {color: #FFFFFF; text-decoration: underline}
a:link {color: #000000; text-decoration: underline}
a:visited {color: #000000; text-decoration: underline}
</style>
<script language="JavaScript" src=".../hp/links.js"></script>
<script language="JavaScript 1.2" type="text/javascript">
function popup(url,name,size)
{
window.open(url,name,size);
}
</script>
</head>
<style>
BODY {SCROLLBAR-FACE-COLOR: #065781; SCROLLBAR-HIGHLIGHT-COLOR: #065781; SCROLLBAR-SHADOW-COLOR: #065781; SCROLLBAR-3DLIGHT-COLOR: #065781; SCROLLBAR-ARROW-COLOR:  #065781; SCROLLBAR-TRACK-COLOR: #065781; SCROLLBAR-DARKSHADOW-COLOR: #065781; }
</style>
<body>
<table width="600" align="center" border="0" cellpadding="0" cellspacing="0">
  <tr> 
    <td height="21" background="../../../img/content_head.gif"> 
      <div align="center"><strong>Charakter Sets</strong></div></td>
  </tr>
  <tr> 
    <td valign="top" background="../../../img/content_bg.GIF"> 
      <table width="93%" align="center" border="0" cellpadding="0" cellspacing="0">
        <tr> 
          <td> <p>&nbsp;</p>
            <p align="center">Charsets. Einfach auf den gew&uuml;nschten Link 
              klicken und das Bild im Popup mit rechtsklick und ...speichern unter 
              kopieren. </p>
            <table width="50%" border="0" align="center" cellpadding="0" cellspacing="0">
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-wolfie.png','Bild1','width=288,height=256')">Wolfsmensch</a> 
                    </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-boulder.png','Bild1','width=288,height=256')">Boulderdash</a> 
                    </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-robo.png','Bild1','width=288,height=256')">Robotrek</a> 
                    </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-jill.png','Bild1','width=288,height=256')">Jill 
                    Valentine </a></strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-tetrisattack.png','Bild1','width=288,height=256')">Tetris 
                    Attack </a> </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-evermore.png','Bild1','width=288,height=256')">Secret 
                    of Evermore</a> </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-firekirby.png','Bild1','width=288,height=256')">Fire 
                    Kirby</a> </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-guybrush.png','Bild1','width=288,height=256')">Guybrush 
                    Threebwood </a> </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-cinnamon.png','Bild1','width=288,height=256')">Dr. 
                    Cinnamon</a> </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-gunfighter.png','Bild1','width=288,height=256')">Gunfighter</a> 
                    </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-bluemary.png','Bild1','width=288,height=256')">Blue 
                    Mary </a> </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-soul.png','Bild1','width=288,height=256')">Shining 
                    Soul </a> </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-winbee.png','Bild1','width=288,height=256')">WinBee</a> 
                    </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-krystal.png','Bild1','width=288,height=256')">Starfox 
                    Krystal </a> </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-army.png','Bild1','width=288,height=256')">Mecha 
                    Army </a> </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-redcoat.png','Bild1','width=288,height=256')">Red 
                    cout Girl</a> </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-vacation.png','Bild1','width=288,height=256')">Magical 
                    Vacation </a> </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-umi.png','Bild1','width=288,height=256')">Umi 
                    Rayearth </a> </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-crystal.png','Bild1','width=288,height=256')">Pokemon 
                    Crystal Heroes</a></strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-james.png','Bild1','width=288,height=256')">James</a> 
                    </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-arch.png','Bild1','width=288,height=256')">Archeologist</a> 
                    </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-ctmonster.png','Bild1','width=288,height=256')">Chrono 
                    Trigger Enemies</a> </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-bomberman.png','Bild1','width=288,height=256')">Bomberman</a> 
                    </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-lupin.png','Bild1','width=288,height=256')">Lupin 
                    III. </a> </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-Brock.png','Bild1','width=288,height=256')">Brock</a> 
                    </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-austin.png','Bild1','width=288,height=256')">Austin 
                    Powers </a> </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-monster.png','Bild1','width=288,height=256')">Flying 
                    Monster </a> </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-breakerstomper.png','Bild1','width=288,height=256')">Mr. 
                    Breaker </a> </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-arabian.png','Bild1','width=288,height=256')">Arabian 
                    Nights </a> </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-blackblack.png','Bild1','width=288,height=256')">Black 
                    Black </a> </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-dexter.png','Bild1','width=288,height=256')">Dexters 
                    Laboratory </a> </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-monkey.png','Bild1','width=288,height=256')">Super 
                    Monkey Ball</a> </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-chuchu.png','Bild1','width=288,height=256')">Chu 
                    Chu Rocket Mouse</a> </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-groove2.png','Bild1','width=288,height=256')">Grove 
                    Adventure 1</a> </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-groove.png','Bild1','width=288,height=256')">Grove 
                    Adventure 2</a> </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-houshin.png','Bild1','width=288,height=256')">Battle 
                    Houshin </a> </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-dev.png','Bild1','width=288,height=256')">Red 
                    Devil </a> </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-alien.png','Bild1','width=288,height=256')">Super 
                    Cute Aliens</a> </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-spaceman.png','Bild1','width=288,height=256')">Spaceman</a> 
                    </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-misc1.png','Bild1','width=288,height=256')">Misc. 
                    Charas</a> </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-punk.png','Bild1','width=288,height=256')">Punk 
                    Guy </a> </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-icyman.png','Bild1','width=288,height=256')">Iceman</a> 
                    </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-bmg.png','Bild1','width=288,height=256')">Blue 
                    Military </a> </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/chara-elves.png','Bild1','width=288,height=256')">Elfen</a> 
                    </strong></div></td>
              </tr>
              <tr> 
                <td><div align="center"><strong><a href="javascript:popup('http://www.silentdream.co.uk/rtptemplate.png','Bild1','width=288,height=256')">RTP 
                    Chara Template</a> </strong></div></td>
              </tr>
            </table>
          <p>&nbsp;</p></td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td><im*g src="../../../img/content_foot.GIF" width="600" height="29"></td>
  </tr>
</table>
</body>
</html>