Was ist falsch? Hover-Funktion

Traumerin

Hallo! Ich möchte einen Übersichtsplan mit Hover-Effekten gestalten.

Werbepost

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

bego

Deine Frage wäre leichter zu beantworten, wenn Du den Code mit Hilfe des Code-Tags im Foren-Editor (das ist das Rautezeichen in der Menüleiste rechts) verwenden würdest.

jQuery ist bereits in WordPress enthalten. Du kannst es in Templates nutzen, in dem Du folgenden Code eingibst:

PHP

<?php wp_enqueue_script('jquery'); ?>

Bego

Traumerin

OK! Sorry!

Code

<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script></p>
<p>></p>
<p><!--                        /* Reset CSS */<br />
 html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}</p>
<p>#preview_image {<br />
 border:0px dashed #000000;<br />
 height:342px;<br />
 position:absolute;<br />
 right:-400px;<br />
 top:75px;<br />
 width:500px;<br />
 display:none;<br />
 }<br />
 #content {<br />
 margin:0 auto;<br />
 width:600px;<br />
 position:relative;<br />
 }</p>
<p>--></p>
<p><script type="text/javascript">// <![CDATA[
        $(document).ready(function(){
           $("#item_1").hover( function () { $('#preview_image').css({'background-image':url'("/wp-content/uploads/2010/08/parkplaetze-150x150.png")', 'top':'100px', 'left':'300px'}); $('#preview_image').fadeIn(200); }, function () { $('#preview_image').fadeOut(200); } );</p>
<p>           $("#item_2").hover( function () { $('#preview_image').css({'background-image':url'("/wp-content/uploads/2010/08/eisbahn.png")', 'top':'200px', 'left':'100px'}); $('#preview_image').fadeIn(200); }, function () { $('#preview_image').fadeOut(200); } );
           $("#item_3").hover( function () { $('#preview_image').css({'background-image':'url("item_1_background.png")', 'top':'100px', 'left':'450px'}); $('#preview_image').fadeIn(200); }, function () { $('#preview_image').fadeOut(200); } );
        });
// ]]></script>
</p>
<p><br class="spacer_" /></p>
<div id="content">
<p><img style="border: 0px none currentColor;" usemap="#Map" src="/wp-content/uploads/2010/08/plan.png" alt="" width="600" height="497" /></p>
<p><!-- Imagemap --></p>
<map id="Map" name="Map">
<area id="item_1" shape="circle" coords="235,107,25" href="#" />
<area id="item_2" shape="circle" coords="26,238,26" href="#" />
<area id="item_3" shape="rect" coords="91,179,122,271" href="#" />
</map>
</div>

Alles anzeigen

Danke für Deinen Tipp, aber wo muss ich denn das hinschreiben? In den Template-Code?

PHP

<?php wp_enqueue_script('jquery'); ?>

bego

Irgendwie ist da bei deinem Code der Wurm drin. In Style Sheets gehören keine <br />-Tags. Womit hast Du denn da editiert?

Das Tag wp_enqueue_script wird im <head>-Bereich der header.php eingefügt und ersetzt Dein <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>

Bego

Traumerin

Zitat von bego

Irgendwie ist da bei deinem Code der Wurm drin. In Style Sheets gehören keine <br />-Tags. Womit hast Du denn da editiert?
Das Tag wp_enqueue_script wird im <head>-Bereich der header.php eingefügt und ersetzt Dein <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
Bego

Den Code hat mir jemand angefertigt.
Gibt es keine einfache Lösung für mein Problem?

bego

Mal eine bescheidene Frage: Wie/wo hast Du das denn hochgeladen?
Aufgrund der <br />-Tags vermute ich ja fast, dass Du hier einfach HTML-Code mit dem visuellen Editor als Artikel hochgeladen hast?

Bego

Traumerin

Zitat von bego

Mal eine bescheidene Frage: Wie/wo hast Du das denn hochgeladen?
Aufgrund der <br />-Tags vermute ich ja fast, dass Du hier einfach HTML-Code mit dem visuellen Editor als Artikel hochgeladen hast?
Bego

:-( Du vermutest richtig
Ich arbeite erst seit einer Woche mit WP und kenn mich noch nicht wirklich aus :sad:
Was muss ich machen?

bego

Neee, neee, so geht das aber nich' :-)

Wenn Du schon HTML einfügen willst, dann solltest Du zumindest im Editor auf HTML-Eingabe schalten (Lasche im Editor oben rechts). Sonst meint WP Du willst in Deinem Artikel HTML-Code für andere zur Ansicht veröffentlichen und packt das schön in zusätzliche HTML-Tags.

Die meisten Beiträge, die Du hier findest, beziehen sich auf Anpassungen in Themes. Da werden kurzerhand die PHP-Datei umprogrammiert und dann per FTP in das Verzeichnis [FONT=Courier New]wp-content/themes[/FONT] hochgeladen. Das setzt jedoch geringfügige Kenntnisse in HTML, CSS, PHP und dem einen oder anderen WordPress-Tag voraus.

Grundsätzlich denke ich, dass eine jQuery-Animation voraussetzt, dass jQuery im Header eingebunden wird, also die header.php-Datei angepasst wird. Das Tag, das eingebaut werden muss, hatte ich Dir ja schon genannt. Aber wie gesagt: Eine Anpassung setzt geringfügige Programmierkenntnisse voraus.

Bego

Traumerin

Danke! Jetzt muss ich irgendwie weitersuchen :)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Was ist falsch? Hover-Funktion

Jetzt mitmachen!