Mouse over image is sometimes not found
reed.richards - February 15, 2009 - 09:58
| Project: | Imagemenu |
| Version: | 6.x-1.0 |
| Component: | Code |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Jump to:
Description
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?
#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;
}
?>