I'm using marinelli theme and the rotating images. Now, I'm looking to add usemap to some of the images, as the images are rotating images and are not within a specific node. Moreover, I'm adding the banners through admin->apperance->settings->marinelli->banner management. So, I couldn't add the usemap html tag within the body or some-other place as within blocks/nodes. I tried various ways to add but couldn't get any idea.

I have found some module jQuery Map Hilight, where i can add features to the usemap not really adding usemap to an image.

Is there any way to add usemap tag? Is there any way like adding some code in page.tpl.php?


As none of my attempts were working, I tried a completely new approach using views.

I've created a new content type named 'banner'. And in the body field, I've added an html img tag and map tag(for image mapping). Now, I've created a view with format as slideshow and field as content:body. Creating a block for this view and adding it in the advertise region (in marinelli theme) replaces the rotating banner image in Marinelli theme.

Before adding the view in advertise region, we need to disable the original theme banner. For this, goto admin->appearence->settings->marinelli->Banner configuration and choose 'Drupal region (advertise) for the question Do you want to use marinelli banners or a classic drupal region?


There is if you're willing to break apart some theme code. You'll need to stitch together a few changes to make this happen.

  1. Map Generation.

You're going to need some front-end tool to select your geometry and map it to hyperlinks. It sounds like plugin/module you found may do this. Failing that, it's pretty easy to find existing online tools to do this: Example #1, Example #2, Example #3. It should generate some map & area elements for you.

  1. Storing Maps

Here you're going to be altering the form array/submission-handler in theme-settings.php & template.php so you can store the maps for each image. There are few parts of this to change:

  • _marinelli_banner_form($image_data): This generates the subform that contains all the image form elements. For simplicity, you can add a textfield form element called image_map that will contain the map/area markup for each image.
  • marinelli_settings_submit($form, &$form_state): This submission handler will need to be altered so you can store the map/area data. A likely area would be the 1st foreach block where you can take each image_map and store it into the $settings array.

This should be it here. The get/set functions marinelli_get_banners/marinelli_set_banners are creating a complex array that gets stored into theme_marinelli_banner_settings so no additional data structure altercation should be needed. All you need to do is add the image_map element for each stored image.

  1. Displaying Maps

Here we're looking at logics/banners.inc to alter the rendering. This PHP include contains the banner element markup in the template.php:marinelli_preprocess_page(&vars) > page.tpl.php:$banner_image rendering pipeline.

  • marinelli_banner_markup($banners): Here each $banner should have an array element image_map that we defined before. It's using theme_image to generate the image. It should be pretty easy to add the usemap element, and output the map/area markup we've stored. There is also some logic for wrapping the image in a link that needs to be scrubbed out.
  • marinelli_banners_add_js($num_banners): This function adds all the JS sources/settings to fire up the slideshow. It may need to be tweaked to make sure the maps cycle correctly when the changing images.
  • This didn't work..
    – GIRI
    May 7 '15 at 4:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.