Download & Extend

Pre-load hover images prior to hovering

Project:Imagemenu
Version:6.x-1.x-dev
Component:Miscellaneous
Category:feature request
Priority:normal
Assigned:Unassigned
Status:needs review
Issue tags:rollover

Issue Summary

First I have to say that I love the module and I appreciate all the work you've done on it. Just have a quick feature request.

It would be even more useful if their was maybe a setting to pre-load the hover images while the static images are loading. This way there isn't an initial load, that sometimes takes a bit depending on the quality, during each hover.

Thanks

Comments

#1

Consider using one big image with all the buttons in all states, then changing the "background-position" of the button upon mouseover (hover).

#2

I would also like this feature...

Thanks!!

#3

Post a patch and I will review and commit to the code.

#4

Hmmm. I'm not really a module developer but I hacked my theme to preload my images. Just show them in the php template and then hide them with css.

#5

you can hack imagemenu.module like this.
notice that the javascript must be inserted BETWEEN the li tags!
instead of using javascript you could insert any other way of preloading if you want (e.g. insert a hidden picture...)

Code, line 493-...:

  if (!empty($item['path'])) {
  
    $output = '<li class="'. $li_class .'"'. $listyle .'><a href="'. url($item['path']) .'" class="'. $a_class .'"><img src="'.
    base_path() . $item['imagepath'] .'" alt="'. check_plain($item['alt']) .'" title="'. check_plain($item['title'])
    .'" name="imagemenu_'. $prefix .'_'. $item['mid'] .'"'. $script .' /></a>'. $menu;
   
    // add preload javascript
    $output .= "<script type=\"text/javascript\"> img1 = new Image(); img1.src = \"".base_path().  $item['mouseover'] ."\"; </script>";
    $output .= '</li>';

  }

#6

If someone wants to write a preload javascript function that gets embedded in the page if a setting is activated in the module settings, I will be delighted to review and commit.

#7

ok. i will do when i find the time...

hope this will happen :-)

#8

Version:6.x-1.2» 6.x-1.x-dev

First thanks for this module, I've used it several times.

I need rollover images preload, so I have written a patch to do it.

It's a quick fix, so it may be improved.

It adds a configuration setting (Preload rollover images) in the image menu settings page (admin/build/menu/imagemenu/settings) to enable/disable this funcionality.

How it works? It just creates a JS Image object setting its source to the rollover image to preload. This is done one time for each image to preload. Using drupal_add_js each rollover image path is added to Drupal.settings.imagemenu_preloads array in the theme_imagemenu_item function. Again, using drupal_add_js, the JS function to preload all rollover images (reading input from Drupal.settings.imagemenu_preloads), is added in the imagemenu_build_output function.

glueck-medien in #5 pointed out a similar solution (using Image objects) but when I wrote this patch I didn't see his post. Instead of embebing a script tag inside li tag, this patch delegates the preload to the JS layer. It may generate cleaner HTML output (because no script tag is inserted inside li tags), but I think that it can be rewroted to fit better imagemenu internals (sorry, I don't know well how imagemenu module), for example loading rollover data from database instead of adding one by one in theme_imagemenu_item.

To use this patch apply it to the module, put the attached imagemenu.txt file in the module directory and rename it to imagemenu.js (js files can't be attached in drupal.org).

I've tested this patch successfully in a site with two imagemenu blocks.

AttachmentSize
imagemenu_preload_rollovers.patch 2.39 KB
imagemenu.txt 161 bytes

#9

Status:active» needs review

Ooops, changing status to 'needs review' because a patch is included.

#10

SUbscribing, greetings, Martijn

#11

confirmed the patch in #8 worked for me. could do with image size parameters on the image menu, also noticed a bug, when selecting images from browse on a menu, a / is put at the start of the path, if you remove the / the path saves and works as expected, but if you dont, you get a file path error.

# patch -p0 < imagemenu_preload_rollovers.patch

patching file imagemenu.admin.inc
Hunk #1 succeeded at 515 (offset -1 lines).
patching file imagemenu.module
Hunk #1 succeeded at 433 (offset -1 lines).
Hunk #3 succeeded at 501 (offset -1 lines).
[root@webgateway imagemenu]# more imagemenu.info
name = Imagemenu
description = Module to create menus from image files.
core = 6.x
package = Menu
php = 5.0

; Information added by drupal.org packaging script on 2011-02-25
version = "6.x-1.x-dev"
core = "6.x"
project = "imagemenu"
datestamp = "1298619421"

nobody click here