Bildgröße ändern via Mouseover??

    Hallo!
    Ich möchte einen Fotoblog erstellen, wo ich in jedem Beitrag ein Bild vorstelle.
    Dieses möchte ich nicht über eine Gallerie einstellen, sondern über den Content Upload einfach in den Artikel einfügen.
    Nun suche ich eine Möglichkeit, wie ich es machen kann, dass bei einem Mouseover das Bild im Artikel (bsp. 500x250 px) in einer anderen Auflösung (bsp. 1200x400 px) angezeigt wird und beim wegbewegen der maus wieder verschwindet.
    Gibt es da nen html Befehl oder sowas, was men nehmen kann?
    Wäre dankbar für Ratschläge!!
    THX

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Hallo!
    Leider hat dieses Plugin keine nützliche Funktion diesbezüglich!
    Beim draufklicken öffnet sich das Bild in Originalgröße in einem neuen Fenster - so gehts auch ohne Plugin, aber so möchte ich es ja nicht haben.
    Trotzdem danke!
    Sonst jemand ne Idee?

    So, habe mal das FanzyZoom Plugin probiert, welches anscheinend genau das kann, was ich suche!
    Aber entweder bin ich zu blöd - oder es funktioniert schlicht und ergreifend nicht!
    Vorgehen:
    - Ich habe das Plugin installiert und aktiviert
    - Habe die Bilder wie vorgegeben in den Beitrag eingefügt:
    <a href="image.jpg" title="An image"><img src="image-thumbnail.jpg" /></a>
    - und was passiert:
    Das Bild öffnet sich wieder in einem neuen Tab - langsam verze´weifel ich - das kann doch nicht so schwer sein *argl*
    Wäre sehr dankbar für ne Lösung!!
    THX

    die .js Dateien kommen in den Ordner des verwendeten Themes
    wenn dort schon ein "js"-Ordner vorhanden, darein, sonst einen anlegen
    wenn du den Überblick behalten willst, welche Dateien zu welcher Anwendung gehören, kannst du auch einen extra Ordner anlegen z.B. "mouseover"
    die Dateien dann innerhalb <head>.....</head>, der header.php deines Themes verlinken
    wie der Effekt dann aufgerufen wird, siehst du in der index.html des Beispiels, einfach mal mit einem Editor öffnen
    die Pfade zu den Dateien, sowie der Bilder, müssen natürlich stimmen

    hallo Art of Pic,
    ich habe die Beiträge interessiert gelesen und wollte dies bei mir nachstellen, habe ich es richtig verstanden, ich brauche diese o.g. plugins gar nicht mehr für den mouseover effekt.
    Ich habe Deine Ergänzungen in die header.php eingetragen und die js-dateien beim theme-ordner hinterlegt, leider klappt da gar nichts wie im beispiel mit der index.html ausführbar wird...muss da noch in der style.css was rein oder page.php (es wird ja im artikel oder auf der stat. seite zur anzeige gebracht)..für Tips wäre ich sehr dankbar!
    gruss mele

    mele
    Ich weiß nicht was du umsetzen möchtest.
    Dieser Mouseover Effekt ist eine Tooltip-Spielerei, funktioniert logischerweise auch nur bei relativ kleinen Mouseoverbildern, ist also nicht zu vergleichen mit Plugins wo bei Klick auf das Thumbnail, das Bild in Originalgröße betrachtet werden kann.

    zu Anwendung:
    das

    Zitat

    wie der Effekt dann aufgerufen wird, siehst du in der index.html des Beispiels, einfach mal mit einem Editor öffnen
    die Pfade zu den Dateien, sowie der Bilder, müssen natürlich stimmen

    hast du gelesen?
    da findest du z.B. den CSS-Code

    Code
    #preview{
    position:absolute;
    border:1px solid #ccc;
    background:#333;
    padding:5px;
    display:none;
    color:#fff;
    }

    und auch wie die Bilder in den Artikel eingefügt werden müssen
    wenn alles korrekt eingefügt und die .js-Dateien richtig verlinkt, dann funktioniert das auch...
    siehe http://s14.directupload.net/file/d/2783/f68rf3yz_gif.htm

    Einmal editiert, zuletzt von Tutrix (28. Januar 2012 um 12:57)

    nun folgende einträge habe ich beispielhaft gemacht um das nachzustellen (nicht produktiv, nur lokal);

    1) header.php:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <meta name="author" content="TEST" />
    <meta name="robots" content="INDEX, FOLLOW"/>
    <title><?php if (is_home () ) { bloginfo('name'); } elseif ( is_category() ) { single_cat_title(); if(get_bloginfo('name') != "") echo ' - ' ; bloginfo('name'); }
    elseif (is_single() ) { single_post_title(); }
    elseif (is_page() ) { bloginfo('name'); if(get_bloginfo('name') != "") echo ': '; single_post_title(); }
    else { wp_title('',true); } ?></title>
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/script.js"></script>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="main.js" type="text/javascript"></script>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <!--[if IE 6]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie6.css" type="text/css" media="screen" /><![endif]-->
    <!--[if IE 7]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie7.css" type="text/css" media="screen" /><![endif]-->
    <link rel="alternate" type="application/rss+xml" title="<?php printf(__('%s RSS Feed', 'kubrick'), get_bloginfo('name')); ?>" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="<?php printf(__('%s Atom Feed', 'kubrick'), get_bloginfo('name')); ?>" href="<?php bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo('url'); ?>/test.ico" />
    <?php wp_head(); ?>
    </head>

    2) style.css:

    /* begin Page */
    body, p
    {
    margin: 0.5em 0;
    font-family: Arial, Helvetica, Sans-Serif;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    text-align: justify;
    }
    #preview{
    position:absolute;
    border:1px solid #ccc;
    background:#333;
    padding:5px;
    display:none;
    color:#fff;
    }

    3) auf der wp-Seite:

    <ul>
    <li><a href="http://localhost/wordpress/wp-c…taltungen/1.jpg" class="preview"><img src="http://localhost/wordpress/wp-c…altungen/1s.jpg" alt="gallery thumbnail" /></a></li>
    </ul>

    Das Ergebnis ist dies, dass nur im 2ten tab das vergrösserte bild angezeigt wird oder halt meine lightbox2 die mit dem preview irgendwie angesprochen wird ?!
    ich habe leider von css, html nicht viel ahnung, für tips wäre ich dir sehr dankbar!
    viele grüße mele

    "Verwende doch bitte den entsprechenden BBcode, um Code hier im Beitrage einzufügen."

    zur header.php
    du hast einfach nur den Code aus der Demo-index.html übernommen...also Pfade anpassen, damit die Dateien auch gefunden werden

    zur style.css
    hier hast du den kompletten Style der Demo-index.html übernommen, statt nur den für "preview" Class

    wenn du sowieso ein Lightbox-Plugin verwendest, wozu dann noch diese Tooltip-Spielerei...beides zusammen muss ja zu Problemen führen
    also entscheide dich für Eins von Beiden

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden