Bilder vergrößert darstellen durch einfaches "Mouseover"

Bilder vergrößert darstellen durch einfaches "Mouseover"

Oft reicht es, ein Bild nur kurz vergrößert dazustellen, um sich einen besseren Eindruck zu verschaffen. Mit diesem Beitrag ist es möglich durch ein "Mouseover" (Maus zeigt auf das Bild) verschiedene Bilder, z.B. aus einer Bildergalerie zu vergrößern. Ein Vorteil dieser Bildvergrößerung ist die Verwendung von nur einer Befehlszeile, für alle zu betrachtenden Bilder. Die vergrößerten Bilder werden über dem Vorschaubild angezeigt. Sie sind so lange zu sehen, bis der Mauszeiger den Bildbereich verlassen hat.
Auch läßt sich diese Funktion in die Forum Symbol-Bar integrieren!


Hier das Menü in Aktion:
http://104774.homepagemodules.de/t108f31...eover-quot.html


Vorsicht - Installation!!!

Um die Bilder mit einem "Mouseover" vergrößert darstellen, muß man folgendes tun:

Bilder hochladen (z.B. mit Homepagemodules.de )

HTML-Code in Forum-Code umsetzen unter "Admin > Einstellungen > Codes/Smilies" > Ersetze.. und ..mit:

---

[mouseover] umsetzen in <a href="#" class="menue">
[Bild] umsetzen in <span >
[/mouseover] umsetzen in </a >
[/Bild] umsetzen in </span >

---

Speichern nicht vergessen!

CSS-Datei unter "Admin > Layout > Farben & Schriften > Inhalt der CSS Datei öffnen:

Eintragungen sicherheitshalber in einer Textdatei abspeichern (z.B. "CSS-Datei.txt")

Folgende Eintragung vornehmen:

Die Eintragungen können individuell angepasst werden. Mögliche Änderungen sind zwischen diesen Zeichen /* ... */ aufgezeigt.
Der Wert top: -350px; bestimmt den Darstellungsabstand zu den Vorschaubildern. Der Abstand wird von Browser zu Browser unterschiedlich dargestellt. Bitte kontrollieren!!!

---

a.menue, a.menue:link, a.menue:visited, a.menue:active {
position: relative;
text-decoration: none;
/* font-style: italic; color: #000000; */
}

a.menue:hover {
/* color: #000000; */
background: transparent;
}

a.menue span {
display: none;
text-decoration: none;
}

a.menue:hover span {
display: block;
position: absolute;
top: -350px;
left: 0;
padding: 5px;
border:1px solid #000000;
background: #FFFFFF;
/* width: 200px; z-index: 100; color: #000000; font: 10px Verdana, sans-serif; text-align: left; */
}

---

Speichern nicht vergessen!

Weitere Links zum Thema "Bilder vergrößern":

DropDown-Menü für die Symbol-Bar

Bilder durch einen Mausklick vergrößert darstellen

Bilder ansehen mit dem Super-Zoom

Abstand zwischen Bilder beliebig bestimmen



Bis dann und
Gutes Gelingen

Es wäre ja mal schön (für diejenigen die es noch nicht können, es aber lernen wollen) wenn man einen Screenshot einstellen könnte, damit man GENAU weiß wo man was eintragen muß. Ich komme mit den ganzen Beschreibungen hier absolut nicht klar, was ich schade finde, da ich mein Forum auch gerne verändern würde.
Gruß, Micha

also ik find das noch recht anschaulich was wolf da macht!! es gibt wesentlich schlimmere und kompliziertere beschreibungen für einbau methoden als diese!!!

ik denke mal das du dich da einfach nur mal richtig rein fuxen must und nen bissel ausprobiren must und dann funzt das auch alles!!! aber nie die sicherungskopie vergessen vorher zu erstellen!!! ^^

[mouseover] umsetzen in <a href="#" class="menue">
[Bild] umsetzen in <span >
[/mouseover] umsetzen in </a >
[/Bild] umsetzen in </span >

Kommt bei rot die Bildadresse rein?

Ist das so wie im Anhang gezeigt richtig eingetragen?
Danke für die Hilfe!

Gruß

Hallo micha1471,
ich kann verstehen, was Du meinst.
Oft sind Beiträge sehr kurz, wenig beschrieben und es wird viel vorausgesetzt.
Man muß oft selber suchen und ausprobieren!
Wie ich sehe bist Du schon ein Stück weitergekommen.
Auf jeden Fall, erstelle ein Backup, in Form einer Textdatei.
Die Zeit muß einfach sein. Wenn etwas schief geht, kann man es schnell wiederherstellen!

Ich muß nochmal nachfragen:

Danke, das war es was ich wissen wollte!!!
Deine Anhänge haben mir sehr weiter geholfen.

Vielen Dank und ein schönes WE.

Gruß, Micha