php - Change background image on menu hover in Wordpress

625

Here is my site (click here) I 'm trying to get the background image to change on hover of a menu item, and I'm getting close! However, when I hover, the menu disappears and the swap back to the original image is not smooth like I'd like. Any ideas on how I can improve this??

<?php
/*
Template Name: Page - All Projects
*/
?>
<?php get_header(); ?>

<?php 
/* #Start the Loop
======================================================*/
if (have_posts()) : while (have_posts()) : the_post(); 
?>

<?php
/* #Get Fullscreen Background
======================================================*/
$pageimage = get_post_meta($post->ID,'_thumbnail_id',false);
$pageimage = wp_get_attachment_image_src($pageimage[0], 'full', false); 
ag_fullscreen_bg($pageimage[0]); 
?>


<script type="text/javascript">
jQuery(document).ready(function($) {

//rollover swap images with rel
var img_src = "$pageimage";
var new_src = "";

$(".rollover").hover(function(){
 //mouseover

 img_src = $(this).attr('src'); //grab original image
 new_src = $(this).attr('rel'); //grab rollover image
 $(this).attr('src', new_src); //swap images
 $(this).attr('rel', img_src); //swap images

},
function(){
 //mouse out

 $(this).attr('src', img_src); //swap images
 $(this).attr('rel', new_src); //swap images
});
//preload images
var cache = new Array();
//cycle through all rollover elements and add rollover img src to cache array
$(".rollover").each(function(){
var cacheImage = document.createElement('img');
cacheImage.src = $(this).attr('rel');
cache.push(cacheImage);
});
})(jQuery);
</script>





<div >


      <div id='cssmenu'>
 <ul>
   <li class='has-sub '><a href='#'>Center Consoles</a>
    <ul>
      <li class='sub'><a href='http://takeitto11.com/striper2015/portfolio/2oo-cc/'><img width="1500px" height="1000px" rel="http://takeitto11.com/striper2015/wp-content/uploads/2014/10/Striper_HPS_1500x150010.jpg" />200 CC</a></li>
      <li class='sub'><a href='#'>220 CC</a></li>
      <li class='sub'><a href='#'>2605 CC</a></li>
    </ul>
   </li>
   
   <li class='has-sub '><a href='#'>Dual Consoles</a>
    <ul>
      <li class='sub'><a href='#'>200 DC</a></li>
      <li class='sub'><a href='#'>220 DC</a></li>
    </ul>
   </li>
   
   <li class='has-sub '><a href='#'>Walk Arounds</a>
    <ul>
      <li class='sub'><a href='#'>200 Walk Around</a></li>
      <li class='sub'><a href='#'>220 Walk Around</a></li>
      <li class='sub'><a href='#'>2601 Walk Around</a></li>
      <li class='sub'><a href='#'>2901 Walk Around</a></li>
    </ul>
   </li>

 
</div>


        <div ></div>
      </ul>



People are also looking for solutions to the problem: the process class relies on proc_open, which is not available on your php installation.
Source

Share


Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.


Similar questions

Find the answer in similar questions on our website.

173 php - Change background image on menu hover in Wordpress
803 ajax - PHP "php://input" vs $_POST
654 php - CakePHP 2.5.7 - Authentication failure on login with non-standard user
68 php - CakePHP 3.0 Confirm Delete Modal in Bake Template
431 PHP header, Content type: image not allowing text
262 php - wordpress plugin for get mysql data
189 WordPress: Running Multiple Arrays in functions.php to add custom fields
49 internationalization - Is it possible to change gettext files from PHP?
754 Why does my Php Image upload not work?
656 php - In Laravel, how do I retrieve a random user_id from the Users table for Model Factory seeding data generation?

People are also looking for solutions to the problem: php - how to auto increment variable

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.