Image Map in Header


Author Message
Ken

Posted: 8/24/2010
Quote message 

I need help. I've looked for answers through the forums but no specific guide could I find.

My site: http://dev.magauto.com

Task: Make an image map for top banner so that the main logo is clickable, also the car manufacturer logos are clickable.

I can go to image-maps.com and make an image map for the background image,
http://dev.magauto.com/templates/theme028/images/MAGAuto_header_2.png

But I don't know where to insert the code!

I appreciate any help!

 
PK

Posted: 8/24/2010
Quote message 

In my opinion, the header is the weakest part of Artisteer (I'm current on the version). I have built my own Joomla templates and converted several from HTML to Joomla.

I have sent enhancement requests until I'm blue in the face for the following:
1) treat the header as a module which allows you to put it outside the art-sheet which makes it stretch. You can do this now with the footer with a simple cut and paste in the template HTML (there is documentation on the Artisteer site on how to do this.).
2) if you use the header in 'native' mode, allow for background transparency like the footer without affecting the text
3) create a logo position in the header (similar to a text box) with full transparency where you can define a) a logo to be placed there and b) a URL for it to link to with the default being the site home page.

Mostly I don't understand why the header isn't a module.

 
Will

Posted: 8/24/2010
Quote message 

Make a 10px x 10px transparent .png file in whatever graphics program you use. In the example below, mine is named link.png.

Find this line in the template index.php file. It's around line 39 or so, depending on your template.

<div class="art-header-jpeg"><a href="http://yoursite.com"><img src="images/link.png" height="217px;" width="1000px;"></a></div>

Change the height and width to the size you need, and the whole header becomes linkable to http://yoursite.com
 
gweedo

Posted: 8/26/2010
Quote message 

In the new version of artisteer (2.5), you'll have to go to the subfolder of your theme folder called templates and edit the page.php file. Be aware there there is a page.php file in the theme folder as well as the templates subfolder.

You can then use Will's trick above.
 
KK

Posted: 9/26/2010
Quote message 

Quote gweedo:

In the new version of artisteer (2.5), you'll have to go to the subfolder of your theme folder called templates and edit the page.php file. Be aware there there is a page.php file in the theme folder as well as the templates subfolder.

You can then use Will's trick above.


Edit....what ? a bit more information ?

 
Ben Sewell

Posted: 2/3/2011
Quote message 

Quote Will:

Make a 10px x 10px transparent .png file in whatever graphics program you use. In the example below, mine is named link.png.

Find this line in the template index.php file. It's around line 39 or so, depending on your template.

<div class="art-header-jpeg"><a href="http://yoursite.com"><img src="images/link.png" height="217px;" width="1000px;"></a></div>

Change the height and width to the size you need, and the whole header becomes linkable to http://yoursite.com


Did near enough this and it worked OK.

www.bensewell.co.uk


 
thanks

Posted: 2/17/2011
Quote message 

Quote Will:

Make a 10px x 10px transparent .png file in whatever graphics program you use. In the example below, mine is named link.png.

Find this line in the template index.php file. It's around line 39 or so, depending on your template.

<div class="art-header-jpeg"><a href="http://yoursite.com"><img src="images/link.png" height="217px;" width="1000px;"></a></div>


Change the height and width to the size you need, and the whole header becomes linkable to http://yoursite.com



It works like a charm!!!
 
Chris

Posted: 3/3/2011
Quote message 

Quote Will:

Make a 10px x 10px transparent .png file in whatever graphics program you use. In the example below, mine is named link.png.

Find this line in the template index.php file. It's around line 39 or so, depending on your template.

<div class="art-header-jpeg"><a href="http://yoursite.com"><img src="images/link.png" height="217px;" width="1000px;"></a></div>

Change the height and width to the size you need, and the whole header becomes linkable to http://yoursite.com


Will is a genius!

I have been trying for weeks to figure out how to make imagemaps on my header image in the artisteer template.

Reading Will's comment on how to make the entire image a link feature I took this on further and played around with how wide and high you make the link image Will refers too.

I also then made numerous link images (with different names of course) and played around with varying these widths and heights as well to create a number of images that stretched out to various other parts of the main header image that I wanted to be links to other websites and hey presto! It works a treat and is as close to image maps as I have managed to get.

All I did was keep changing the hyperlink address for each different new link image I'd made and have that transparent image cover the area of the main header image I wanted to act as my image map.

I hope this makes sense as I'm really pleased with the outcome and can't thank Will enough for getting me started with this idea.

I thought I could never get a image map ability on the Artisteer template.
 
ALL2RAIN

Posted: 3/11/2011
Quote message 

:-D

Thanks Will!!!! Worked for me!!!

This should obviously be a feature that the developlers should add...


 
CHILE71

Posted: 3/23/2011
Quote message 

The only place I could find it was in my Style Sheet and it looked like this:

div.art-header-jpeg
{
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 882px;
height: 150px;
background-image: url('images/header.jpg');
background-repeat: no-repeat;
background-position: center center;
}

Can anyone help?
 
Garry

Posted: 3/31/2011
Quote message 

It should be in index.php
 
Francisco

Posted: 8/7/2011
Quote message 

Hola. I´m speak in Spanish, para insertar una imagen de cabecera con links a otros sitios web, pueden hacerlo con adobe firework, abren su banner con ese programa y le pueden insertar al banner zonas interactivas ya sean rectangulares, circulares o poligonales, las zonas interactivas tienen la cualidad de poder linkear a paginas externas o internas (de tu sitio) entonces, cuando ya tienes terminado tu banner con las zonas interactivas, te vas a archivo/exportar y guardas como Html e imágenes. eso te generara dos archivos, tu imagen de cabecera o banner y un código html donde aparecen los links y las coordenadas de las zonas, etc, ahora lo que sigue es subir el banner a tu plantilla por medio de tu cliente FTP y editar el html de tu plantilla artisteer tal como sigue...

este es un ejemplo del codigo que se genera en fireworks, solo esta parte es necesaria para que funcione

<img name="header" src="ruta del archivo/header.png" width="850" height="72" border="0" id="header" usemap="#m_header" alt="" />
<map name="m_header" id="m_header">
<area shape="rect" coords="727,0,753,19" href="http://www.youtube.com" alt="" />
<area shape="rect" coords="562,2,721,19" href="http://www.uach.cl" target="Ninguno" alt="" />
</map>

ese código se pega debajo de:

<div class="art-header">
<div class="art-header-center">
<div class="art-header-png">
(se pega aqui)

y debería funcionarles.

 
Tim

Posted: 2/24/2012
Quote message 

You rock Will!

A very simple solution.

Thank you.
 
Nora

Posted: 2/27/2012
Quote message 

I tried Will's solution and it seems to work fine in theory. However...the company logo (that I want to function as a link) is now positioned above the image map. The hand cursor only appears around the borders of my jpeg and not when I try to click on the image. I tried changing the z-index of the "div.art-Header-jpeg" but that didnt help either.

Any ideas? Thanks for your help!!

 
Steph

Posted: 4/19/2012
Quote message 

Lovely solution - can anyone suggest how the exact same thing could be done with an html Artisteer site please? I want to make the logo on the LHS of the header a link/hotspot but can't seem to figure out how.
Thanks!
 
jrgweb

Posted: 4/19/2012
Quote message 

This depends on your code. Do you have link to site?

A few ways are like this.

1. <a href="http://www.yoursite.com"><div class="art-headerobject"></div></a>

2.<div class="art-header" onclick="location.href='http://www.svenskakakel.se/';"style="cursor:pointer;"></div>

Again, it depends on your code.
 
Garry

Posted: 4/19/2012
Quote message 

For HTML website you need to do it in every page.
 
Tony

Posted: 5/1/2012
Quote message 

I have the new version of Artisteer and I can't even find a theme folder or subfolder called templates. I have located the index.php in my templates folder, but the relevant code isn't there. Exactly where should I be looking for the page.php file?


Quote KK:

Quote gweedo:

In the new version of artisteer (2.5), you'll have to go to the subfolder of your theme folder called templates and edit the page.php file. Be aware there there is a page.php file in the theme folder as well as the templates subfolder.

You can then use Will's trick above.


Edit....what ? a bit more information ?



 
Tony

Posted: 5/1/2012
Quote message 

OK, I've found a work around. I deleted the header entirely from my Artisteer template and simply recreated it in a custom HTML module in Joomla and used position-15

Voila! no coding :-)
 
Craig

Posted: 5/21/2012
Quote message 

I got this to work also.

Use Fireworks.
Create/import graphic using FW. (You can open PSD files also)
Using the image map tool. Create your hotspots.
** This is Key = Export the image with HTML
There will be 2 files. HTML + plus the graphic (you won't need the graphic as it's already in the Artisteer template)
Open HTML code with a code reader IE Dreamweaver.

Copy the source code
Open index.php file with Code reader
Paste below: <div class="art-headerobject">
(after paste, make sure it closes with </div>

**Don't forget to adjust your image source within the code IE:
src="templates/template1/images/header-object.png"

That's it. All good to go


Quote Francisco:

Hola. I´m speak in Spanish, para insertar una imagen de cabecera con links a otros sitios web, pueden hacerlo con adobe firework, abren su banner con ese programa y le pueden insertar al banner zonas interactivas ya sean rectangulares, circulares o poligonales, las zonas interactivas tienen la cualidad de poder linkear a paginas externas o internas (de tu sitio) entonces, cuando ya tienes terminado tu banner con las zonas interactivas, te vas a archivo/exportar y guardas como Html e imágenes. eso te generara dos archivos, tu imagen de cabecera o banner y un código html donde aparecen los links y las coordenadas de las zonas, etc, ahora lo que sigue es subir el banner a tu plantilla por medio de tu cliente FTP y editar el html de tu plantilla artisteer tal como sigue...

este es un ejemplo del codigo que se genera en fireworks, solo esta parte es necesaria para que funcione

<img name="header" src="ruta del archivo/header.png" width="850" height="72" border="0" id="header" usemap="#m_header" alt="" />
<map name="m_header" id="m_header">
<area shape="rect" coords="727,0,753,19" href="http://www.youtube.com" alt="" />
<area shape="rect" coords="562,2,721,19" href="http://www.uach.cl" target="Ninguno" alt="" />
</map>

ese código se pega debajo de:

<div class="art-header">
<div class="art-header-center">
<div class="art-header-png">
(se pega aqui)

y debería funcionarles.



 
Dave B

Posted: 9/4/2012
Quote message 

Quote Tony:

OK, I've found a work around. I deleted the header entirely from my Artisteer template and simply recreated it in a custom HTML module in Joomla and used position-15

Voila! no coding :-)


Great, but how do you put a menu underneath?
 
David Alvarez

Posted: 9/7/2012
Quote message 

I have wrote some tutorials about customizing artisteer templates (Spanish) Maybe the are of some use to you...

You can read them in:
http://www.david-alvarez.com.mx/tutoriales