javascript rollover or something else?

**eggrush** · 3 Feb 2009, 01:54 PM

Hi Guys
I am trying to put a new header on my site www.canvas-style-art.co.uk

I have added some adverts underneath the design what looks like the end of the header but its not, its all one image (look at thumbnail on this mail), i want it this way so where my new header ends the normal ZC page starts with featured products as it is now, so really its just a redesigned header with a few rollovers and links.

I have tested this as a gif, animated gif and jpeg but cant get the 3 rollovers to work, the closest i come was the animated gif but because it was made with 2 frames they just loop.

I know this is kinda ambitious for someone that is relatively new to ZC but my questions are,

1 Can it be done
2 How? (a walkthrough would be cool.)

**eggrush** · 4 Feb 2009, 01:10 PM

can anyone help here?

**rstevenson** · 4 Feb 2009, 09:41 PM

You could use an image map on one of your images, or use a Flash header. Never done either (in Zen Cart) so I'm not sure how. But I've seen other posts about both methods, so a search should yield the answer.

Rob

**eggrush** · 5 Feb 2009, 09:57 AM

Yeah I don't really want to use any flash just in case it causes problems, I did a search on image map but can't find to much information.

It can't be to hard to make this happen its just a rollover, I think someone with a level of coding knowledge may know how to achieve this, so if there is anyone out there willing to help, message me.

**tony_sar** · 5 Feb 2009, 11:02 AM

i might not be help much on this , but do you have a link to a site that uses this kinda animation on their header ? site animation that interests you ..

there are many ways you can create this type of effect so looking at a live site , would help ..

**eggrush** · 5 Feb 2009, 12:34 PM

I have not really got a site I have seen it on but I got the idea from a template monster temp below and took it on a bit more adding some links:

http://www.templatemonster.com/zen-c...tes/22051.html

its just something i have come up with, just to point out its not an animation its just 3 simple rollovers and some links down the side but the problem I have is how to make this gif (on the thumbnail) make this happen as I already have a gif header in place and thats all good for what does but I just wanted to put a few adverts to different cats that people might not normally look into.

egg

**eggrush** · 5 Feb 2009, 12:54 PM

I have exported this file from firworks as html, heres the code below but couldn't I just paste this code into the header files ( which ones?) and add the images to the image folder, will that work? am I thinking on the right lines?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script language="JavaScript">

</script>
</head>
<body bgcolor="#ffffff" onLoad="MM_preloadImages('images/shop_heading_r2_c2_f2.jpg','images/shop_heading_r4_c2_f2.jpg');">
<table border="0" cellpadding="0" cellspacing="0" width="762">

<tr>
<td><img src="images/spacer.gif" width="10" height="1" border="0" alt=""></td>
<td><img src="images/spacer.gif" width="187" height="1" border="0" alt=""></td>
<td><img src="images/spacer.gif" width="397" height="1" border="0" alt=""></td>
<td><img src="images/spacer.gif" width="168" height="1" border="0" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
</tr>

<tr>
<td colspan="4"><img name="shop_heading_r1_c1" src="images/shop_heading_r1_c1.jpg" width="762" height="301" border="0" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="301" border="0" alt=""></td>
</tr>
<tr>
<td rowspan="4"><img name="shop_heading_r2_c1" src="images/shop_heading_r2_c1.jpg" width="10" height="362" border="0" alt=""></td>
<td><a href="http://www.canvas-style-art.co.uk/index.php?main_page=index&cPath=157" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('shop_heading_r2_c2','','images/shop_heading_r2_c2_f2.jpg',1);"><img name="shop_heading_r2_c2" src="images/shop_heading_r2_c2.jpg" width="187" height="126" border="0" alt=""></a></td>
<td rowspan="2" colspan="2"><img name="shop_heading_r2_c3" src="images/shop_heading_r2_c3.jpg" width="565" height="139" border="0" usemap="#m_shop_heading_r2_c3" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="126" border="0" alt=""></td>
</tr>
<tr>
<td><img name="shop_heading_r3_c2" src="images/shop_heading_r3_c2.jpg" width="187" height="13" border="0" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="13" border="0" alt=""></td>
</tr>
<tr>
<td colspan="2"><a href="http://www.canvas-style-art.co.uk/index.php?main_page=index&cPath=66_100" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('shop_heading_r4_c2','','images/shop_heading_r4_c2_f2.jpg',1);"><img name="shop_heading_r4_c2" src="images/shop_heading_r4_c2.jpg" width="584" height="179" border="0" alt=""></a></td>
<td rowspan="2"><img name="shop_heading_r4_c4" src="images/shop_heading_r4_c4.jpg" width="168" height="223" border="0" usemap="#m_shop_heading_r4_c4" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="179" border="0" alt=""></td>
</tr>
<tr>
<td colspan="2"><img name="shop_heading_r5_c2" src="images/shop_heading_r5_c2.jpg" width="584" height="44" border="0" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="44" border="0" alt=""></td>
</tr>
<map name="m_shop_heading_r2_c3">
<area shape="rect" coords="407,111,565,139" href="http://www.canvas-style-art.co.uk/index.php?main_page=page&id=6" alt="" >
</map>
<map name="m_shop_heading_r4_c4">
<area shape="rect" coords="10,28,168,56" href="https://www.canvas-style-art.co.uk/index.php?main_page=login" alt="" >
</map>
</table>
</body>
</html>

**jobspk** · 5 Feb 2009, 03:32 PM

What i need to do is have a css a:hover effect activated when another element's rollover effect on the page (an image with its own javascript rollover effect) is activated.
Its hard to explain, so a visual example can be seen at http://www.berlinit.com/maction/home.html (this is the working version with all images (its generated by fireworks so yes its very ugly code, but the required effect can be seen there)).
What i'm working on is making the links along the right into text links with css a:hover effects, which are triggered when the mouse rolls over the images in the middle (see http://www.berlinit.com/maction/test/home.html for a working example, with some css i've been trying (unsuccessfully) to implement).
I dont know how to do this one besides setting up the text links as images with their own javascript rollovers, and i'd prefer to have them as pure text links with css hover effect.
Any suggestions on how to go about getting this problem sorted would be massively appreciated.

**eggrush** · 7 Feb 2009, 09:19 PM

anyone?,lol

Thread: javascript rollover or something else?

Thread Tools

Search Thread

Display

javascript rollover or something else?

Re: javascript rollover or something else?

Re: javascript rollover or something else?

Re: javascript rollover or something else?

Re: javascript rollover or something else?

Re: javascript rollover or something else?

Re: javascript rollover or something else?

Re: javascript rollover or something else?

Re: javascript rollover or something else?

Similar Threads

v150 Looking for plugin "buy something, get something else free"

How do I add javascript rollover buttons to my header?

Posting Permissions