Suche

[breakdancer]

Hallo,

gerade in den News und im Inhaltsbereich auf etwas "schmaler" formatierten Seiten (z. B. MX-Rainbow im Original) kann man nicht immer Bilder in der Größe einfügen, wie man sie den Zuschauern gerne präsentieren möchte.

Aus diesem Grund suche ich eine Möglichkeit, per WYSIWIG in News eingefügte Bilder durch ein Javascript beim Mouseover auf eine fest definierte Größe zu vergrößern.

Ein Bild wird z. B. in der Größe 100 x 80 px im Artikel eingefügt. Fährt nun der Besucher mit der Mouse drüber, springt das Bild in der doppelten Größe hervor und wird auch wieder kleiner, wenn der Besucher das Bild mit der Mouse verlässt.

Dabei habe ich im Internet schon viele Sources gefunden, die aber auf der Grundlage zweier Bilder arbeiten. Das heisst, das im Editor eingefügte Bild ist die kleine Version, fährt man mit der Maus drüber wird ein zweites, größeres Bild nachgeladen... Bedeutet aber wieder zu viel Arbeit.

Wie kann ich so etwas mit einem einzigen Bild realisieren ?

Liebe Grüße

Markus

[Musicman75]

meinst du so wie hier:

http://www.gothic-online.de/News.html

[breakdancer]

Ja, grundsätzlich ist das genau die Idee. Leider hat das bei Dir auf der Seite nur einmal funktioniert, jetzt gehen leider keine Popups mehr auf, trotz ausgeschaltetem Popup-Blocker, schade...

Momentan versuche ich das Ganze per Tooltips zu lösen, wobei das allerdings für nen HTML-Crack wie mich erstmal ziemlich undurchschaubar ist...

Das mit den Tooltips findet man übrigens hier - falls es jemanden interessiert, das Resultat (wenn man es denn kann) ist supi: http://www.walterzorn.de/tooltip/tooltip.htm

Trotzdem sind natürlich andere Lösungsansätze herzlich willkommen. Also sag schon: wie hastes gemacht ? ;-)

Liebe Grüße

Markus

[Musicman75]

das ist komplett mit css gemacht. kein javascript.

Code Auswählen Erweitern

.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #c0c0c0;
padding: 5px;
left: -1000px;
border: 1px dashed #7a084d;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}

und dann per php die bildgröße auslesen und entsprechend das kleine bild berechnen.

den rest kannst ja am quelltext sehen.

[breakdancer]

uuurgh.... Ich muss dringendst anfangen, HTML und PHP zu lernen...

Danke schön, sieht gut aus, die Idee ist sensationell und genau das, was ich angesprochen habe...

Nur leider kann ich damit momentan gar nix anfangen... Es fehlen zu viele Kenntnisse, gerade beim Auslesen in PHP...

Ich klinke mich jetzt vermutlich mal bissl ausm Forum aus und mache erstmal Grundlagenforschung, damit ich bissl selbstständiger werde. Auch wenn es meine Zeit eigentlich gar nicht zulässt....

Bis dahin werde ich - so wie es momentan ausschaut - die Seite eh erstmal auf HTML weiterlaufen lassen und PMX ist bis auf Weiteres leider erstemal raus...

Nochmal herzlichen Dank, werde das auf jeden Fall im Auge behalten.

Gruss

Markus

[moskote01]

das ist komplett mit css gemacht. kein javascript.

Code Auswählen Erweitern

.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #c0c0c0;
padding: 5px;
left: -1000px;
border: 1px dashed #7a084d;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}

und dann per php die bildgröße auslesen und entsprechend das kleine bild berechnen.

den rest kannst ja am quelltext sehen.

Hier findest du ne kleine Anleitung wie es mit css geht
http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/#thumb