Solved

Clickable rollovers in Jooma

Posted on 2010-09-10
15
628 Views
Last Modified: 2012-05-10
Hello!
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.
0
Comment
Question by:cromartie1974
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
15 Comments
 

Expert Comment

by:velcrobots
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:

http://extensions.joomla.org/search?q=rollover+
0
 
LVL 11

Expert Comment

by:Amanda Watson
ID: 33650578
I actually tried doing a flash menu once in a joomla site here http://www.byronbayrugby.com.au/

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
0
 

Author Comment

by:cromartie1974
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.
Capture2.JPG
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

Author Comment

by:cromartie1974
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?
0
 
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 use...is that more of what you want?
0
 
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
0
 
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.
0
 

Author Comment

by:cromartie1974
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.
0
 
LVL 14

Accepted Solution

by:
Allan Nisbet 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.

Storm



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

Author Closing Comment

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

Author Comment

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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Change Joomla Logo Graphic This tutorial goes over the steps to change the Joomla Logo in the template you are using. For this example we will be assuming you are using the rhuk_milkyway Joomla Template which is installed by default. You will …
Welcome Friends, This is the tutorial for how to create new simple module in joomla 1.5. In the module has two important files. One is XML file and another file is PHP controller file. First you need to create the XML file. (CODE) …
Finding and deleting duplicate (picture) files can be a time consuming task. My wife and I, our three kids and their families all share one dilemma: Managing our pictures. Between desktops, laptops, phones, tablets, and cameras; over the last decade…

739 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