Solved

Clickable rollovers in Jooma

Posted on 2010-09-10
15
624 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
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
 
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
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 13

Accepted Solution

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

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

In the following article I will try to explain some of the issues I had learning Joomla and I hope this helps all of you beginners out there that love the concept but find it confusing and difficult to manage and configure a Joomla website. Like …
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…
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

758 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

19 Experts available now in Live!

Get 1:1 Help Now