Wordpress Quick Tips #22 - Πως να κάνετε ένα Rollover Image

Μια περιοχή για το WordPress, αυτή την δημοφιλή δωρεάν πλατφόρμα για blogging

Συντονιστές: WebDev Moderators, Super-Moderators, PHP Moderators

Απάντηση
Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Wordpress Quick Tips #22 - Πως να κάνετε ένα Rollover Image

Δημοσίευση από Basilakis » 09 Ιαν 2010 00:06

Συνεχίζουμε το Tennis λοιπόν...

Joomla Quick Tips #9 - Πως να κάνετε ένα Rollover Image

Με το Wordpress δεν είναι τόσο απλό. Αν και μπορείτε να περάσετε με plugin τον CKEditor και να σας λύσει τα χέρια, εγώ θα σας παρουσιάσω και μια μικρή function :)

Φτιάχνουμε λοιπόν μέσα στο theme directory μας μια μικρή function με όνομα αρχείου rollover.js

Κώδικας: Επιλογή όλων

jQuery(function($) {
$(document).ready(function() {

		// Preload all rollovers
		$("#hoverlink img").each(function() {
			// Set the original src
			rollsrc = $(this).attr("src");
			rollON = rollsrc.replace(/.gif$/ig,"_over.gif");
			$("").attr("src", rollON);
		});

		// Navigation rollovers
		$("#hoverlink a").mouseover(function(){
			imgsrc = $(this).children("img").attr("src");
			matches = imgsrc.match(/_over/);

			// don't do the rollover if state is already ON
			if (!matches) {
			imgsrcON = imgsrc.replace(/.gif$/ig,"_over.gif"); // strip off extension
			$(this).children("img").attr("src", imgsrcON);
			}

		});
		$("#hoverlink a").mouseout(function(){
			$(this).children("img").attr("src", imgsrc);
		});

	});
});
Η αλήθεια είναι πως χρειάζεται λίγο hacking, εάν θέλετε να αλλάξετε τα file names των αρχείων. Προς το παρών διαβάζει gif αρχεία, όπου το rollover αρχείο έχει το όνομα *_over.gif

Μετά ανοίγουμε το header.php και κάνουμε paste το παρακάτω!

Κώδικας: Επιλογή όλων

 <?php
       wp_enqueue_script&#40;'jquery'&#41;;
       wp_enqueue_script&#40;'jquery-core-ui'&#41;;
       wp_enqueue_script&#40;'jquery-tabs-ui'&#41;;
       wp_enqueue_script&#40;'hoverlink', get_bloginfo&#40;'template_directory'&#41;.'/rollover.js'&#41;;
       wp_head&#40;&#41;;
    ?>
Μέσα στον editor κάνουμε paste το παρακάτω για να εμφανίσουμε το rollover image μας!

Κώδικας: Επιλογή όλων

<div id="hoverlink">
<a href="http&#58;//www.freestuff.gr"><img src="http&#58;//www.freestuff.gr/*.gif" border="0" alt="My Avatar" width="220" height="220" /></a></div>
Όπου * το όνομα του αρχείου

Απάντηση

Επιστροφή στο “WordPress γενικά”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 2 επισκέπτες