Clickable rollovers in Jooma

Posted on 2010-09-10
Last Modified: 2012-05-10
I know its not really a Joomla question, but I use Joomla, so I thought that maybe someone has an idea...I know how to create in Photoshop nice navigation bars etc. Basically I want to use it as an advertisement billboard sort of image, not a regular Joomla menu, of course.
But now I don't know where to turn to...Whether I should learn Fireworks or Flash or what...
I want to have buttons as clickable rollovers.
Some suggest CSS...But, frankly, I don't feel like getting into coding myself.
Question by:cromartie1974

Expert Comment

ID: 33650149
CSS really is your best option.  It's not terribly complicated to learn.  

That said, maybe you can find an extension that will help:
LVL 11

Expert Comment

by:Amanda Watson
ID: 33650578
I actually tried doing a flash menu once in a joomla site here

All I did was create a flash menu and inserted it into a module (using mod_html)

Then I needed to tweak the css a little bit to get it positioned correctly within my template, but it does the trick.

Of course the thing that is not great about this solution is that the menu itself is no longer part of the css and if you want to add menu items, or change menus, you have to do it manually in your flash file

Author Comment

ID: 33650736
And how is mod_html is different from Custom HTML module?
No, I wasn't asking about creating a navigation bar, I was asking about regular graphics that I could add as banners, billboard (as Custom HTML or as an article). I'll attach a file to make it more visual.
So in that picture, I want the button to be clickable and with a rollover.And also 2 thumbnails of shoes be clickable as well.
Usually people who use FW, use DW and not Joomla, so I don't know if FW techniques also apply to Joomla sites.
And like I said, I have a .psd file with 2 states-normal and over as 2 layer comps, but I don't know if that's the way to get anywhere in case of Joomla based sites.
LVL 11

Expert Comment

by:Amanda Watson
ID: 33651824
So the exact same concept applies.  Basically you can set up any type of web application and then copy the entire code from dreamweaver (including any javascript in the head) and then paste that into the html code of either the mod_html module or a custom module.  Of course if you are using a custom_html module you will need to enter the code via html rather than using the WYSIWYG editor.

That is why I choose mod_html for this type of addition...

Does this make any sense?

Author Comment

ID: 33653825
Wait a second----you mentioned DW? So do I have to also use DW to achieve what I want?
As far as I know FW also gives the code...And when you mentioned a web application, what you were talking about-DW and FW?
So do I have to learn FW? What about DW? If I use Joomla, then DW is redundant...or am I wrong?
LVL 11

Expert Comment

by:Amanda Watson
ID: 33654661
Ok, so I am getting the understanding that you don't actually know too much about web development.
Are you a designer trying to use your graphics in a joomla site?

What I am trying to show you is that bascially any type of web application can be used within joomla, but you need to have a bit of an understanding on web development to implement it within joomla.

If you are looking for an extension that you can use within the joomla site that allows you to add your own images with a link, there are many many extensions like this that you can that more of what you want?
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

LVL 11

Expert Comment

by:Amanda Watson
ID: 33654813
I am sorry that you are so frustratred, I am just trying to understand which explanation you want me to go further into so I am not wasting your time or mine
LVL 11

Expert Comment

by:Amanda Watson
ID: 33654822
By the way, I am not employed by experts exchange, I donate my time to help others, and I am only trying to help you.

Author Comment

ID: 33655144
I simply asked if I want to be able to add that kind of graphics to my Joomla site, what apps should I use, that's all. And I don't think I'll use Flash because it will take me a long time to learn it and I want to start making sites ASAP. I already started with FW, 'cos it seems the right thing to do.
LVL 13

Accepted Solution

StormITSolutions earned 500 total points
ID: 33655177
Hi Cromartie1974

I read the whole thread and have to say what snowball77 offered you was a good solution
I would strongly advise not to use flash for its inability to be read as well as html for a menu, its negative effect on SEO is pretty bad.

Forget dw and fw.

You have photoshop its more advanced and is all you need.

The image you posted was good and I know what you need.

The solution is the first post.
CSS is your friend

First stage slice up that image so the background is the background for the main menu div.

NOw create images for the button, the product pics and the alternative rollover images.

Thats all you need.

USe CSS to create a div for the background and one for the button and the images also.
There are thousands of CSS tutorials availabel with a quick google, I would say w3cshools is the best for learning.
YOu are going to need CSS if you venture into the path of joomla.

I would start with a custom code module for this.

Create your div code with html and you can either add the css directly into the custom code or into the css file of your template.

YOur rollovers are simple you are just chaning the background images on an event

In this case is a:hover and a
the css for a link

you use one image for the hover and one for the standard link
Its really that simple.

I could make you the css and html in about 2 mins for this, but its better you leanr it as you will need this for everything in joomla, everythign you see in joomla is controlled by css and the odd bit of java.

YOu were correct in what you said dw is not needed as you have joomla editors.

But its good to use dw as a quick reference, I do as a professional design company, but we also use css visual tools and the developer tools in chrome as you can edit css directly in chrome for viewing only  to see what you want and make it perfect then copy the "live" css for use in your site to acheive the same output.

But one last thing about experts exchange is we are volunteers, we are out to offer our skills as help, our reward is bragging rights for our global positions in the tables or the tshirts or just because we like to share our knowledge ( i personally like the tables and the t's :))

But your point about you've used computers for 20 years and a pro for 13, isn't important if your on here asking for a simple solution to a simple question which you could have obtained the answer to in 1 second on google.

Rollover menu css, and adapted it to your own images.

So I supplied you with a solution, and a little advice, try not to be too rude, especially when if you did a little research snowball77 is one of the top experts in this area of expertise as is myself.


LVL 11

Expert Comment

by:Amanda Watson
ID: 33655231
Thanks Storm, and just to clarify when I posted the comment
'Ok, so I am getting the understanding that you don't actually know too much about web development.'

I wasn't trying to be condescending, I was only trying to ascertain if you were a developer or designer so I could offer more solution depending on your background.  You had mentioned you weren't sure if you needed to learn FW, Flash, and that you were not that keen to use CSS, so I was just trying to get more understanding of your skill and background.

Storm has a wealth of knowledge to share, and due to the lack communication between yourself and I, I won't contribute any more.

I like the T-shirts too Storm

Author Closing Comment

ID: 33655581
Solution is somewhat irrelevant to what I was asking, but it is a solution and I appreciate the time and efforts.

Author Comment

ID: 33659211
Ok, and how I can complain if an expert is being impolite or not sensitive about my feelings?

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This is our step by step to setting up and configuring a Joomla Install on a Windows 2003 Server. This is the perfect solution for an Intranet Website using Joomla. What you need (only use the following versions) : A fresh copy of Joomla http…
Have you ever wanted to use that sweet jQuery gallery plugin on your Joomla site but couldn't get it working due to jQuery conflicts or your lack of knowledge about what's under the Joomla hood? This article will step you through the process of impl…
This video demonstrates how to create an example email signature rule for a department in a company using CodeTwo Exchange Rules. The signature will be inserted beneath users' latest emails in conversations and will be displayed in users' Sent Items…
Concerto provides fully managed cloud services and the expertise to provide an easy and reliable route to the cloud. Our best-in-class solutions help you address the toughest IT challenges, find new efficiencies and deliver the best application expe…

937 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now