POP Up Fenster via CSS

[napsi]

Hallo Miteinander!

Hat jemand eine Idee, wie ich ein IMG in einem pop upfenster öffnen kann, ohne dazu .js verwenden zu müssen?

Grund: Bis jetzt ging alles mit den css und da will ich am ende kein anderes Script mehr einbauen.

Vielleicht gibt es ja eine Seite, wo ein Beispiel zu finden ist. Ich habe leider keine gefunden.

lg.

Napsi

 

[Maik]

Hi,

ein "CSS-Popup" liesse sich beispielsweise so umsetzen:

a.infobox:link, a.infobox:visited {
  color: #bfbfbf;
  text-decoration: none;
}

a.infobox:hover {
  border: none;
  color: #000;
  text-decoration: underline;
}

a.infobox span {
  visibility: hidden;
  position: absolute;
  text-decoration: none;
}

a.infobox:hover span {
  visibility: visible;
  color: #000;
}

a.infobox:hover span img {
  display: block;
  border: none;
}

<a href="#" class="infobox">Start<span><img src="..."></span></a>

Anmerkung: ein Popup-Fenster im herkömmlichen Sinne lässt sich nicht via CSS öffnen.

 

[defc0n1]

//Edit: Da war wohl jemand schneller als ich...die Lösung per CSS ist natürlich besser...

Du kannst das ganz normal per hyperlink realisieren. Allerdings wird das Bild dann in einem komplett neuem Browser Fenster geöffnet ein PopUp ist nur mit JScript oder einer anderen Skriptprache zu realisieren.

http://forum.de.selfhtml.org/archiv/2005/5/t108452/
http://de.selfhtml.org/html/verweise/definieren.htm

Die beiden Links sollten dir weiterhelfen..wenn nicht melde dich nochmal oder frag

 

[napsi]

Danke, aber der mouse over ist mir schon klar. Geht das auch mit klicken?

lg.

Napsi

 

[Maik]

Selbstverständlich geht das - tausch einfach in meinem gezeigten Beispiel in den Selektoren die :hover-Pseudoklasse gegen :active aus.

 

[defc0n1]

Naja also wie ich schon geschrieben habe wenn du wirklich willst das ein Popup Fenster geöffnet wird kannst du das nur mit einer Skriptsprache realisieren sonst wird wenn du es per HTML machst ein Fenster mit dem Bild geöffnet das über die ganze Seite geht.
Du kannst dir ja mal die Links angucken die ich dir dazu gegeben habe.
Da steht auch wie man das ganze mit JavaScript löst...das ist eigentlich sehr leicht zu verstehen.