Clickable rollovers in Jooma

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.
Who is Participating?
Allan NisbetConnect With a Mentor Owner at Storm IT Solutions LTDCommented:
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.


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

That said, maybe you can find an extension that will help:
Amanda WatsonWeb DeveloperCommented:
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
Train for your Pen Testing Engineer Certification

Enroll today in this bundle of courses to gain experience in the logistics of pen testing, Linux fundamentals, vulnerability assessments, detecting live systems, and more! This series, valued at $3,000, is free for Premium members, Team Accounts, and Qualified Experts.

cromartie1974Author Commented:
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.
Amanda WatsonWeb DeveloperCommented:
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?
cromartie1974Author Commented:
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?
Amanda WatsonWeb DeveloperCommented:
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?
Amanda WatsonWeb DeveloperCommented:
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
Amanda WatsonWeb DeveloperCommented:
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.
cromartie1974Author Commented:
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.
Amanda WatsonWeb DeveloperCommented:
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
cromartie1974Author Commented:
Solution is somewhat irrelevant to what I was asking, but it is a solution and I appreciate the time and efforts.
cromartie1974Author Commented:
Ok, and how I can complain if an expert is being impolite or not sensitive about my feelings?
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.