mouseover .src='...' - Bilder nicht angezeigt

  • Hallo wertes Forum,

    ja ja - gleich neu und erstmal Betrag schreiben und die Suchfunktion nicht gefunden...
    Stimmt nicht ganz, nachdem ich google schon traktiert hab, habe ich das forum hier durchsucht, aber vielleicht bin ich auch einfach zu doof zum suchen.

    Ich möchte auf meiner neuen Seite einen Accordion-Effekt zusammen mit einem Mouseover-Effekt kombinieren.

    In meiner bisherigen statischen Seite habe ich das über CSS und :hover realisiert, aber bei dem Accordion-Effekt den ich nun einbinden möchte geht das nicht mehr so recht.

    Dieser Effekt verhindert auch, dass ich viele Image-Replacement-Techniken bzw Mouseovertechniken nicht nutzen kann, weil meine Accordion fordert ein class="trigger" und somit fällt ein class="mouseover" weg.

    Nun habe ich mich auf eine meiner ältesten Seiten zurück besandt und ein altes Mouseover rausgesucht - angepasst mit der class="trigger" schaut dies wie folgt aus:

    PHP
    <a class="trigger" onMouseOver="document.Bild.src='img/logo_2.png';" onMouseOut="document.Bild.src='img/logo_1.png';">
    <img src="<?php bloginfo('stylesheet_directory');?>/img/logo_1.png" name="Bild" width="100" height="50" alt="Demolink" border="0">
    </a>

    Das gute an der Geschichte - der Accordion-Effekt funktioniert tadellos in allen Browsern - Das Bild wird im ersten Moment auch angezeigt - wenn ich aber mit der Maus über das Bild gehe, so werden die Bilder aber nicht mehr angezeigt. Aus der Page wo ich es rausgeholt habe, hat es die Bilder perfekt angezeigt. Auch der Pfad ist richtig - wenn ich mir wie das Theme es vorgibt ein Bild so anzeigen lasse:

    PHP
    src="<?php bloginfo('stylesheet_directory');?>/img/logo_1.png"

    funktioniert das ganze auch - und es ist der selbe Pfad.

    Nun zur Frage - habt Ihr eine Idee wie ich die Bilder mit dem Code oben angezeigt bekomme? hab ich hier einen kleinen Denkfehler, oder geht sowas bei Wordpress grundlegend nicht?

    Wenn ihr eine andere Möglichkeit seht für den Mouseover, so bin ich dafür auch empfänglich.

    Danke und Grüße Marcel

    Einmal editiert, zuletzt von marsl (9. Dezember 2010 um 00:47)

    • 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

  • Hab mir dann doch selber geholfen - aber fürs Protokoll:

    Code im php

    PHP
    <h2 id="trig_portfolio" class="trigger" alt="<?php _e('Portfolio','acc'); ?>" title="<?php _e('Portfolio','acc'); ?>"><?php _e('','acc'); ?></h2>
    <ul class="slider">


    Code im css

    Code
    h2#trig_portfolio  			{background:url(img/button_portfolio.png) no-repeat left top; height: 53px; width: 613px; cursor:pointer;}
    h2#trig_portfolio:link  		{background:url(img/button_portfolio.png) no-repeat left top; height: 53px; width: 613px; cursor:pointer;}
    h2#trig_portfolio:hover  	{background:url(img/button_portfolio.png) no-repeat right top; height: 53px; width: 613px; cursor:pointer;}


    Vielleicht ein weinig zu lang - aber funzt :)
    Grüße Marcel

Jetzt mitmachen!

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