Help with Menu and background images

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Help with Menu and background images

Mariano Martinez Peck
Hi

I need to do something and I really don't know how to do it. I have a PRMenuWidget and for each menu item I have a particular background image. In those images  I have also the text. For example, in the aboutUs.gif there is also the text "About Us". I want to put another background image for mouse hover (actually it only changes the text color). This works well. The problem is that I want to use this image not only with hover but also when that menu item is selected. When I click on that menu item, I want to put that image.

In html + javascript it should be something like this:

<td colspan="9">
<a onmouseout="window.status=''; changeImages('about_us', 'images/about-us.gif'); return true;" onmouseover="window.status='about us'; changeImages('about_us', 'images/about-us-over.gif'); return true;" href="about.html">
<img width="171" height="40" border="0" alt="about us" src="images/about-us.gif" name="about_us"/>
</a>
</td>

any ideas of how can I do this trough pier/seaside ?

Thanks in advance,

Mariano



_______________________________________________
Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki
Reply | Threaded
Open this post in threaded view
|

Re: Help with Menu and background images

John McKeon
Hi Mariano

I have used

   .menu li a.active { background: url(xxxJpg); }

But I have only gotten it to work using a WAFileLibrary setup in the strictly seaside way.
John

On Mon, Apr 13, 2009 at 9:08 PM, Mariano Martinez Peck <[hidden email]> wrote:
Hi

I need to do something and I really don't know how to do it. I have a PRMenuWidget and for each menu item I have a particular background image. In those images  I have also the text. For example, in the aboutUs.gif there is also the text "About Us". I want to put another background image for mouse hover (actually it only changes the text color). This works well. The problem is that I want to use this image not only with hover but also when that menu item is selected. When I click on that menu item, I want to put that image.

In html + javascript it should be something like this:

<td colspan="9">
<a onmouseout="window.status=''; changeImages('about_us', 'images/about-us.gif'); return true;" onmouseover="window.status='about us'; changeImages('about_us', 'images/about-us-over.gif'); return true;" href="about.html">
<img width="171" height="40" border="0" alt="about us" src="images/about-us.gif" name="about_us"/>
</a>
</td>

any ideas of how can I do this trough pier/seaside ?

Thanks in advance,

Mariano



_______________________________________________
Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki


_______________________________________________
Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki
Reply | Threaded
Open this post in threaded view
|

Re: Help with Menu and background images

Mariano Martinez Peck


On Tue, Apr 14, 2009 at 10:57 AM, John McKeon <[hidden email]> wrote:
Hi Mariano

I have used

   .menu li a.active { background: url(xxxJpg); }

But I have only gotten it to work using a WAFileLibrary setup in the strictly seaside way.
John

I made it work with your help :)

Sorry to bother you with CSS questions, but I am very bad with them haha.

Thanks a lot John,

Mariano
 


On Mon, Apr 13, 2009 at 9:08 PM, Mariano Martinez Peck <[hidden email]> wrote:
Hi

I need to do something and I really don't know how to do it. I have a PRMenuWidget and for each menu item I have a particular background image. In those images  I have also the text. For example, in the aboutUs.gif there is also the text "About Us". I want to put another background image for mouse hover (actually it only changes the text color). This works well. The problem is that I want to use this image not only with hover but also when that menu item is selected. When I click on that menu item, I want to put that image.

In html + javascript it should be something like this:

<td colspan="9">
<a onmouseout="window.status=''; changeImages('about_us', 'images/about-us.gif'); return true;" onmouseover="window.status='about us'; changeImages('about_us', 'images/about-us-over.gif'); return true;" href="about.html">
<img width="171" height="40" border="0" alt="about us" src="images/about-us.gif" name="about_us"/>
</a>
</td>

any ideas of how can I do this trough pier/seaside ?

Thanks in advance,

Mariano



_______________________________________________
Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki


_______________________________________________
Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki


_______________________________________________
Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki