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.
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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?
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Here is a tutorial for making your own Joomla templates. Note before reading, you should have some existing knowledge of web development using HTML and CSS. Design Layout: Design your template in a graphics program like Adobe PhotoShop or Corel…
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…
This video shows how to quickly and easily add an email signature for all users on Exchange 2016. The resulting signature is applied on a server level by Exchange Online. The email signature template has been downloaded from: www.mail-signatures…
Established in 1997, Technology Architects has become one of the most reputable technology solutions companies in the country. TA have been providing businesses with cost effective state-of-the-art solutions and unparalleled service that is designed…

830 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