Posted by reed.richards on February 15, 2009 at 9:58am
Jump to:
| Project: | Imagemenu |
| Version: | 6.x-1.1 |
| Component: | Code |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed (fixed) |
Issue Summary
I get this strange behavior sometimes the mouseover image won't appear I just get a broken image icon. I've tried this in several browsers, same error. The image path is correct because otherwise it wouldn't work when pressing reload. Any inputs this? Is it some sort cache problem?
Comments
#1
I think the problem might be inherent to the way the module uses document.imgname.src. Maybe a clear jquery implementation would be more stable and better. One that would nicely degrade when javascript is turned off.
#2
I did this just a quick fix and it seems to be solving the problem. I think using the name tag seems to be a bit outdated(Netscapeish) and maybe the trouble is with caching of the images or something. Anyways I did this fix which ads some jquery lines that switches the images using id rather than name.
<?php
function imagemenu_build_output($menus, $layout) {
drupal_add_css(drupal_get_path('module', 'imagemenu') .'/imagemenu.css');
foreach ($menus as $menu) {
$has_children = empty($menu['link']['has_children']) ? 0 : $menu['link']['has_children'];
if ($menu['below']) {
$outputArray = theme('imagemenu_item', $menu['link'], $has_children, $mid, $layout, imagemenu_build_output($menu['below'], $layout));
$output .= $outputArray['content'];
$js .= $outputArray['js'];
}
else {
$outputArray = theme('imagemenu_item', $menu['link'], $has_children, $mid, $layout, '');
$output .= $outputArray['content'];
$js .= $outputArray['js'];
}
}
drupal_add_js( $js , 'inline','footer' );
return $output ? theme('imagemenu_tree', $output) : '';
}
/**
* Generate the HTML output for a imagemenu item
*/
function theme_imagemenu_item($item, $has_children, $prefix = '', $layout = 'vertical', $menu = '') {
$class = ($menu ? 'expanded' : ($has_children ? 'collapsed' : 'leaf'));
switch ($layout) {
case 'vertical':
$listyle = '';
break;
case 'horizontal':
$listyle = ' style="float:left;"';
break;
}
//$script = $item['mouseover'] ? ' onMouseOver="document.imagemenu_'.$prefix.'_'.$item['mid'].'.src=\''.base_path().$item['mouseover'].'\'" onMouseOut="document.imagemenu_'.$prefix.'_'.$item['mid'].'.src=\''.base_path().$item['imagepath'].'\'"' : '';
$output['js'] = $item['mouseover'] ? '$("#imagemenu_'.$prefix.'_'.$item['mid'].'").mouseover(function(){$(this).attr("src", "'.base_path().$item['mouseover'].'")}).mouseout(function(){$(this).attr("src", "'.base_path().$item['imagepath'].'")});' : '';
if (!empty($item['path'])) {
$output['content'] = '<li class="'. $class .'"'. $listyle .'><a href="'.url($item['path']).'"><img src="'.base_path().$item['imagepath'].'" alt="'.$item['alt'].'" title="'.$item['title'].'" id="imagemenu_'.$prefix.'_'.$item['mid'].'" name="imagemenu_'.$prefix.'_'.$item['mid'].'" /></a>'. $menu .'</li>';
}
else {
$output['content'] = '<li class="delimiter"'. $listyle .'><img src="'.base_path().$item['imagepath'].'" />'. $menu .'</li>';
}
return $output;
}
?>
#3
I've done this in simple javascript (not Jquery) in this version - it should fix your problem.
#4
Automatically closed -- issue fixed for 2 weeks with no activity.