Jump to content

Image mapping with category instead of products


Recommended Posts

I would like to make imagemapping ( Adminscenes.php ) to show categoryes instead of products.


I tired this but it`s not working, of course.

And i want to debug , but it`s seems that even if i activate the debugger in the front office, the back office dosent activate the debugger

The code it`s for Adminscenes.php

    echo '
       [removed]';
           echo 'startingData = new Array();'."\n";
           foreach ($obj->getCategory() as $key => $product)
           {
               $productObj = new Product(intval($product['id_category']), true, intval($cookie->id_lang));
               echo 'startingData['.$key.'] = new Array(\''.$productObj->name.'\', '.$product['id_category'].', '.$product['x_axis'].', '.$product['y_axis'].', '.$product['zone_width'].', '.$product['zone_height'].');';
           }

       echo
       '[removed]

Link to comment
Share on other sites

  • 1 year later...
  • 1 year later...

As an alternative, you could create an image map in say, Adobe Fireworks and copy/paste the code into PS, either in the Home Text Editor or one of the html block modules that are around. That's what I did to create images that pointed to categories on my home page.

Link to comment
Share on other sites

thanks rturner,

 

that is really healpfull.

 

could you give an exampel of what files to edit, if I would put the code in the home text editor? or in one of the modules?

 

that would make it easyer for me, since I am just getting started to know prestashop and how to program the code...

Thanks alot, it is realy apreciated

 

Jesper

Link to comment
Share on other sites

Here is my page with image map. The image map is one long file containing all of the small tilted square images. They each point to a category.

 

To create it you either buy a graphics program like fireworks or download a free one. Basically you open your image in the program and draw out several square or rectangle areas on your image and the program allows you to assign a URL to each "square". Then you export it to html. You will end up with a block of html code which you can copy/paste into Prestashop to create your imagemap. Temporarily paste it into a text editor like notepad.

 

Then, I used Prestashop Home Text Editor. First I put my text paragraphs in. Then I put the cursor where I wanted the image (the one I created the image map for) to go. Then click on the insert image button in home text editor. You will see a space for the image URL with a small square icon on the right. When you click the icon and read a bit, you'll see where you can upload your image. Then you go back to the first insert/edit image window and you can add positioning, etc to general, appearance and advanced tabs (relative to your text). Click Update.

 

You will then, in the home text editor, see your image on your home page inserted somewhere in the text. But no image map. But, you still have the html code which defines the image map from your Fireworks type program pasted into Notepad. Then, still in the Home Text Editor configuration page. click on the little HTML button. Scroll down and see the URL where the image upload put your image. Copy that location code.

 

Then go to Notepad with the html code from your image map, find the <img src for the image and paste over the image URL you copied from the Prestashop Home Text Editor. Copy the entire image map code with the new image location from Notepad. Return to the Prestashop Home Text Editor and click on the HTML button again. This time find the image code again. You will find an <img tag surrounded by positioning and alignment code. When you come to the src= area, you paste in your image map.

 

At that point (hopefully - I'm going from memory here) in your HTML button area you will see your image map code with several <area title= spots defining each of your individually drawn out image maps. Click Update and Save the Home Text Editor. If everything went right, your image map image will show where you want it and there will be links to categories on your site.

 

I used the Home Text Editor. If you find one of the HTML block modules out there it will be slightly trickier because you have to ftp up your image to a certain directory and write the place down to insert the file location in your image map code. Then you just paste your entire image map into the HTML block.

 

Hopefully this is clear. Let me know if not.

Edited by rturner (see edit history)
  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...