Internet Forum / Hilfen für Einsteiger in HPM Foren

Bilder vergrößert darstellen durch einfaches "Mouseover"

#1 von wolf.andres , 20.07.2007 17:00


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:

  • Verkleinerte Version kleines_bild.jpg vom großen Bild großes_bild.jpg erstellen, z.B. mit der Freeware IrfanView oder unter http://www.bilder-verkleinern.de


  • 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




    Forum
    Homepage

     
    wolf.andres
    Beiträge: 99
    Registriert am: 04.02.2007

    zuletzt bearbeitet 06.10.2007 | Top

    RE: Bilder vergrößert darstellen durch einfaches "Mouseover"

    #2 von micha1471 , 24.08.2007 19:10

    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

    micha1471  
    micha1471
    Beiträge: 3
    Registriert am: 24.08.2007

    zuletzt bearbeitet 24.08.2007 | Top

    RE: Bilder vergrößert darstellen durch einfaches "Mouseover"

    #3 von Nostromo6 , 24.08.2007 21:59

    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!!! ^^


     
    Nostromo6
    Beiträge: 38
    Registriert am: 30.07.2007


    RE: Bilder vergrößert darstellen durch einfaches "Mouseover"

    #4 von micha1471 , 25.08.2007 00:04

    [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ß

    Angefügte Bilder:
    Bild.JPG  
    micha1471  
    micha1471
    Beiträge: 3
    Registriert am: 24.08.2007


    RE: Bilder vergrößert darstellen durch einfaches "Mouseover"

    #5 von wolf.andres , 25.08.2007 03:36


    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:

  • Willst Du die Mouseover-Bildvergrößerung in die Symbol-Bar einbauen, dann wird der komplette Forumcode über ein Mausklick in den Beitrag eingefügt. Du brauchst dann nur noch ein großes und ein entsprechendes, kleines Bild in den Forumcode eintragen.

  • Oder willst Du die Mouseover-Funktion z.B. auf die Forum-Startseite einbauen. Dann muß Du die unten stehende HTML-Codeliste nutzen.

    In "Angefügte Bilder" findest Du einzelne Schaubilder für den Einbau in die Symbol-Bar. Vielleicht hilft es weiter.
    Zum Verständnis habe ich folgend nochmal den kompletten HTML-Code und den Forum-Code für das Menü dargestellt.

    Auch hier nachzulesen: http://104774.homepagemodules.de




    Der komplette HTML-Code für die Bildvergrößerung:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Bild vergrößern mit einfachem Mouseover</title>

    <style type="text/css">
    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: -325px;
    left: 0;
    padding: 5px;
    border:1px solid #000000;
    background: #FFFFFF;
    /* width: 310px; z-index: 100; color: #000000; font: 10px Verdana, sans-serif; text-align: left; */
    }
    </style>

    </head>
    <body>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <a href="#" class="menue"><img src="http://www.server.de/kleines_bild.jpg>
    <span><img src="http://www.server.de/großes_bild.jpg></span></a>

    </body>
    </html>



    Der Forum-Code nach der Umsetzung sieht dann so aus (für die Symbol-Bar):

    [mouseover] [img]http://www.server.de/kleines_bild.jpg[/img][Bild][img]http://www.server.de/großes_bild.jpg[/img][/Bild][/mouseover]

    Die Bildadressen werden in "kleines_bild.jpg" und "großes_bild.jpg" eingebaut.
    [img]&[/img] sind schon im Forumcode vorhanden und dienen der Bilddarstellung.


    Bis dann
    und gutes gelingen
    Wolf




  • Forum
    Homepage

    Angefügte Bilder:
    Die CSS-Datei unter Layout, Farben & Schriften.jpg   Die Symbol-Bar unter Einstellungen und Symbol-Bar.jpg   Neuen Forumcode erstellen, unter Codes-Smilies.jpg  
     
    wolf.andres
    Beiträge: 99
    Registriert am: 04.02.2007

    zuletzt bearbeitet 28.08.2007 | Top

    RE: Bilder vergrößert darstellen durch einfaches "Mouseover"

    #6 von micha1471 , 25.08.2007 11:57

    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

    micha1471  
    micha1471
    Beiträge: 3
    Registriert am: 24.08.2007


       

    Vom Mitgliederprofil in die Landkarte
    Überprüfen ob Java aktiviert ist!





    Powered by Forum Hosting  
    Xobor Forum Software von Xobor
    Einfach ein eigenes Forum erstellen