PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Kleine Fensterchen öffnen über bestimmte Stellen eines Bildes


mr-sansibar
19-09-2006, 10:19
Hallo !
Ist es möglich wenn man über bestimmte Stellen eines Bildes geht mit dem Mauszeiger und sich dann ein Fenster öffnet ?

Danke für Eure Hilfe
nEox
19-09-2006, 11:39
Hallo mr-sansibar,

wenn du mit "Popup" nicht ein "sich öffnendes neues Fenster" meinst, wird dir diese Seite weiterhelfen:
http://moneytreesystems.com/css/picpopup.html
Damit sich das CSS Popup nur bei bestimmten Stellen öffnen kannst du einen

unsichtbaren Layer über das Bild legen. Das CSS für diesen Layer wäre dann ca. so:


.unsichtbarerLayerName {
/* verstecke den Layer */
visibility: hidden;

/* setze Position und Ausmaße im Bild */
position: absolute;
top: 200px;
left: 200px;
width: 50px;
height: 50px;

/* zum einfacheren Platzieren kann ein Rahmen gezeichnet werden */
border: 1px solid blue;

}


Willst du wirklich ein "richtiges Popup" mit eigener Leiste zum schiessen haben, kannst du das per Javascript machen.

Alle Infos dazu findest du hier:
http://de.selfhtml.org/javascript/objekte/window.htm#open

Intressante CSS-Spielereien hab ich übrigens auf dieser Seite gfunden:
http://www.cssplay.co.uk/

Grüße,
nEox
mr-sansibar
19-09-2006, 14:44
danke für info !!!
kann mit den seiten nicht anfangen , obwohl sie gut aussehen.

was ich gerne möchte ist, wenn ich mit der maus auf eine spezielle koordinate eines bildes gehe, dass sich dort dann ein fensterchen öffnet und beim verlassen dieser koordinate dieses fensterchen wieder schließt.

grüße
nEox
19-09-2006, 17:50
Also die Links sind genau das was du suchst.

Da man das eigentlich nur kopieren muss hab ich das mal schnell zusammengefügt:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title></title>
<style type="text/css">
/* <![CDATA[ */
.pic {
background-color: #FFFFFF;
left: 10px;
position: relative;
top: 10px;
width: 135px;
}

.pic a .large {
border: 0px;
display: block;
height: 1px;
left: -1px;
position: absolute;
top: -1px;
width: 1px;
}

.pic a img {
border: 0;
}

.pic a.p1, .pic a.p1:visited {
position: absolute;
top: 50px;
left: 50px;
background: #FFFFFF;
border: 1px solid #000000;
display: block;
height: 5px;
width: 5px;
text-decoration: none;
}

.pic a.p1:hover {
background-color: #8C97A3;
color: #000000;
text-decoration: none;
}

.pic a.p1:hover .large {
border: 1px solid #000000;
display: block;
height: 150px;
width: 200px;
left: 150px;
position: absolute;
top: -60px;
}
/* ]]> */
</style>
</head>
<body>
<div class="pic">
<img src="images/front3tn.jpg" alt="Thumbnail image" title="Thumbnail image" height="90" width="135"><a class="p1" href="#" title="thumbnail image"><img src="images/front3.jpg" alt="Enlarged view of image" class="large" title="Enlarged view of image" height="233" width="350"></a>
</div>
</body>
</html>


Du musst nur noch die Bilder ändern. Getestet mit Firefox 1.5 und IE 6.

Grüße,
nEox
Pingu
19-09-2006, 19:41
Das was Du suchst findest Du hier:
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display http://de.selfhtml.org/css/eigenschaften/positionierung.htm#visibility http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active
mr-sansibar
20-09-2006, 14:35
danke !

eine sache wer da noch !

habe ein ziemlich größes bild (1024X1024), und wie kann ich innerhalb dieses bildes verschieden fensterchen auf und zu blenden, basierend auf den obigen code.
am besten wäre es doch mit koordinaten, zb, wenn einebestimmte koordinate mit der maus erreicht wurde soll sich ein kleines fenster öffnen und beim verlassen dieser koordinate automatisch wieder zu schließen.

danke
Ravetracer
20-09-2006, 14:51
Du könntest das Originalbild mit einem Grafikprogramm in einzelne Teile
zerschneiden und auf der Seite per CSS positionieren.
Entsprechend kannst du dann für die Teilbilder den obigen Code anwenden.
mr-sansibar
20-09-2006, 15:03
danke das ist aber ein größer aufwand für mich.

gibt es keine möglichkeit mit koordinaten zu arbeiten. und zu jeder kordinatenfläche ein fensterchen.
Ravetracer
21-09-2006, 07:03
Ich denke schon, dass es die Möglichkeit gibt, und zwar mit Javascript.
Ich selbst bin von Javascript nicht so der Freund, aber werde mich wahrscheinlich
in naher Zukunft doch damit beschäftigen müssen.
Schau mal hier:

http://de.selfhtml.org/dhtml/modelle/dom.htm

unter Event-Handling beim DOM.
Das Beispiel sieht recht vielversprechend aus, der Code und die Erklärung
liegen ja auch dabei.
Pingu
21-09-2006, 07:11
gibt es keine möglichkeit mit koordinaten zu arbeiten. und zu jeder kordinatenfläche ein fensterchen.
Ja, den Link habe ich zwar oben schon einmal gepostet, aber mache ich es halt noch einmal: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position

PS: Dazu braucht man kein JavaScript.
Ravetracer
21-09-2006, 08:36
PS: Dazu braucht man kein JavaScript.

Ja gut, aber er hat ja 1 großes Bild.
Ich denke, man könnte mit Imagemaps und dem Code oben das auch
realisieren.
nEox
21-09-2006, 14:37
Hallo mr-sansibar,

ja das funktioniert mit dem Code da oben. Die Koordinaten sind im CSS, das hatte ich dir in meinem ersten Post schon versucht nahezubringen.
X- und Y-Punkt sind hier die "left" und "top" Angaben. Mit "width" und "height" legst du die Maße der Fläche fest die mit der Maus überfahren werden kann.
X und Y (also "left" und "top") bilden hier also die Koordinate für den oberen rechten Punkt dieser Fläche.

Eigentlich musst du nur den Code oben nehmen, verstehen und ensprechend anpassen (Teile davon duplizieren).

Grüße,
nEox
Pingu
21-09-2006, 17:53
Ja gut, aber er hat ja 1 großes Bild.
Ich denke, man könnte mit Imagemaps und dem Code oben das auch
realisieren.

Wo ist das Problem? Dann noch mal ganz einfach:
Bild mit <img> definieren gewünschte Links mit <a> definieren. gewünschte Fenster-Information mit <div> definieren die <a>-Elemente über dem Bild an den gewünschten Stellen positionieren (position:absolute; top:Ypx; left:Xpx; width:Apx; height:Bpx;) die Fenster-Informationen an den gewünschten Stellen positionieren die Fenster-Informationen verstecken (display:hidden) Pseudoklasse :hover für die <a>-Elemente definieren, so dass die jeweiligen Fenster-Informationen eingeblendet werden (display:show), wenn man mit der Maus über das <a>-Element fährt

Eine simple Kombination aus den Eigenschaften zu den Links, die ich oben bereits gepostet habe.

EDIT: nEox hat es ja auch schon gepostet.
susan.kasten
28-09-2006, 07:44
Hallo,

versuch doch mal das Bild über Imagemaps zu unterteilen. Hier kannst du die Koordinaten genau angeben. Dann empfehle ich dir nach "wz_tooltip.zip" zu googlen. Das ist ein Script, dass es dir ganz leicht ermöglicht, Beschreibungstexte zu hinterlegen oder kleine Grafiken einzublenden, wenn du über die entsprechende Koordinate gehst.

Dies ist eine ganz leichte und schnell zu realisierende Möglichkeit. Wenn du einen vernünftigen Editor hast, z.B. Dreamweaver oder auch Photoshop, kannst du die Imagemaps gnaz schnell anlegen, in dem du die entsprechenden Bereiche einfach damit auswählst. Der "Tooltip" muss dann über eine entsprechende Funktion nur noch eingebunden werden und das script selber hinterlegt werden.

Hier ein Beispiel dazu: http://www.kirchspiel-wetter.de/n7_xxl.php.

Viel Erfolg.

susan
mr-sansibar
28-09-2006, 10:52
vielen dank susan !
was ein zufall genau diese javascript was du ewrwähnst hast, habe ich gefunden und benutzt.

grüße, ümit