Beyond Photoshop, Where to go now and What to do???

You will have to either do the rollover effect using PS or Fireworks or by uploading 2 images to the site folder and do some scripting. It isn't possible to do this without one or the other (the other being no html as you say to instruct the browser to do the rollover effect).

Tutorilals:

1, USING CSS: http://idonny.com/analysis/css-rollover-without-javascript-accessible

2. USING FLASH: http://www.webdesign.org/flash-swish/flash-tutorials/create-cool-rollover-buttons-using-flash.10396.html

3. Using FIREWORKS: http://www.entheosweb.com/website_design/rollover_images.asp

4. USING PHOTOSHOP: http://help.adobe.com/en_US/photoshop/cs/using/WS50663BFE-71C1-4290-A1B2-C704E20048D9a.html

What type of CMS are you using? I know Wordpress has a rollover option in its WYSIWYG editor, maybe yours does also.

I use Joomla...

I haven't used Joomla's visual editor, but in Wordpress it is in the area where you insert an image. When it asks for a name once uploaded you have a few more options one is to choose onclick, onmouseover etc. Have you seen this in your image editor for Joomla?

PS link doesn't really help because because they just direct you to Dreamweaver...
I want to learn Flash, but I know it would take forever and I want to start working sooner than that.
Also...not always Flash is a good option (for one, not all clients will agree to having it in Flash).
I don't know enough about CSS in order to code in it, so there's no really point to start from scratch right now just for rollovers...
So the only useful link is about FW...But there I couldn't understand the following sentence, maybe its a typo
''Make sure your rollovers are in the exact same place as your rollovers''...
But anyway, my impression that I would have to start learning FW in order to know what exactly they're talking about in the article.
So there's no a way just to get some simple instructions what to do? Like...open this, do that kinda thing? They use a FW terminology that don't tell me much without learing the application.

I don't use image editors in Joomla...I have a folder for images and I simply insert images from there into articles.

I meant LEARNING the application in the last sentence of my post above....

Another thing that is unclear in that FW article is this
Under HTML style choose Dreamweaver 2.0 (or 3.0)
Do I still have to choose this option even though I don't use DW, but Joomla?

Sure, give me a moment, and I will make an example for you and take some screenshots.

Ok, I was making the tutorial when I came across this site. It is from adobe and has sample files. I believe it would be better for you than my tut. Plus this is going to take some time. If you still need assistance after the Adobe Tutorial, let me know (I have to go right now, but I will be back later).

http://www.adobe.com/support/fireworks/rollovers/creating_rollovers/

That tutorial was useless...And also it was made for previous versions of FW.
It was unclear and complicated. Maybe due to version differences, but I  think it goes  beyond that...
But not only that. That tutorial was about creating a rollover effect on a single file SEPARATELY.
And that's not what I need. I need to be able to place button or buttonS on a background rectangular image.
Maybe I can try to attach a file here to show what I'm talking about. Ok, looks like it worked.
Its a Photoshop CS4 .psd file with 2 layer comps each representing normal and over states of the buttons.
Don't know if it makes any difference, but also each button has a user slice.
What I want to achieve probably is to get .html file with a code (also need to know what PART of that code should I copy-paste) and when I open the file in the browser I have a rollover effect AND each button is assigned a different URL (for  example, google, yahoo, cnn, bbc).
What I need is a STEP BY STEP short tutorial how to achieve that goal in Fireworks CS5.
That's all...
roll3.psd

P.S. I DO have each button separately as .gif files. Because I have a script that does that.
But the problem is...I don't know how to assemble them all back together if I create the effect on each one of them separately in FW.

comartie, you sound like a guy that wants to get a job as a chef but only knows how to work a microwave. I admire your enthusiasm and zeal, and I certainly understand your impatience, but you are being wrong headed.

> I want to work as a  freelancer web developer/designer to create sites for small companies  etc. So my goal is that and NOT to be specifically a designer.

> I don't know enough about CSS in order to code in it, so there's no  really point to start from scratch right now just for rollovers...

So when do you think that you might get around to learning CSS? After you have work and are busy with clients?

The world is chock full of web designers. Everyone has a cousin, brother, nephew, girlfriend, or  friend of a friend, who can design their web page.

You want to compete with them but you can't unless the client specifically wants Joomla. Even then, you can't modify or customize Joomla unless someone else has made an extension that does exactly what you need.

Granted, the FireWorks link that Jeremy gave is a bit outdated, but what's keeping you from searching for a newer one?

As far as doing a roll-over in CSS, that is just about as simple as it gets. It only takes a few lines of code, and you don't have to know a lot of CSS to make it happen. However, making it work inside of Joomla is just a little bit trickier, and I probably wouldn't recommend it as a starter project.

However if you tackle it with the same enthusiasm that you have for being a designer, I'm sure that you can do it. You can learn all of the CSS that you need in less than a day, and it might take another day to study up on the file structure in Joomla to learn where to put your code.

EE has some excellent experts in the CSS, HTML and JavaScript areas that can also help you get started.

Best of luck.

I don't want to get into business  side of web design. Its not a right place to discuss that. Like where I would find clients and how much I'll charge them.
One thing I don't understand though...People everywhere tell me exactly the same thing about CSS, BUT
1) NOONE actually taught me HOW exactly to use CSS in Joomla to create a rollover graphics. Everyone only preaches and showing how great they are and how stupid I am. Or..people just give me few lines of code without telling me exactly what to do with it.
2) I know for a fact that I CAN create what I need in FW just fine. So I don't understand WHY its such a bad idea. To me FW seems to be a great app.
3) I'm 200% sure I won't learn CSS in a day or even in a week.
4) At the end of the day...I might just skip the rollover part...Look, even here at EE they do NOT use the rollovers on buttons.
5) If I'll have REAL world clients, then I would start getting a REAL world MONEY. And once I have some cash in my pockets, trust me, lots of things can be solved pretty easy. Considering that about 100 miles away from me in Copenhagen freelance web designers charge up to 80$ an hour...And I would be more than happy to work for one third of that amount...Language might be a problem, but not CSS, trust me.

I haven't actually made any rollovers since I switched from ImageReady to CS4. I don't think it should be much different though. I will give it a go tomorrow and I will check back if I have any success.

Maybe I need to move to Copenhagen. Men jeg vil ikke tale danske!

I reread you question more carefully and see that you are looking to make a click-able rollovers within your Joomla content. I had misunderstood and thought that you were wanting to edit the template to add rollover buttons.

What you want to do is create inline code within your content. It's a little tougher to find tutorials on how to create inline code, and I don't know why. I find the CSS folks a bit prissy about things like "no tables - ever!" and all CSS styling needs to be in external style sheets instead on inline.

This is plain silly because tables and inline code are the only way to design HTML for email, so you think that tutorials would be a lot more common.

Anyway, here's a good basic tutorial on adding the inline code to create a button or graphic with a rollover effect. It's all done in CSS, so you may need to look up some of the CSS terms and see exactly how they can be used (and if you need to use them)

Clicking on the image does not take you anywhere with this script, it just swaps images on mouse over. After you get that working, you just add an onClick, or onMousedown, command that takes you where you want.

Forgot to include the link: http://www.willmaster.com/library/features/swapping-images-with-built-in-image-rollover-code.php

It's all  nice, but I still don't understand what's the advantage to use that CSS code (which has some JS anyways) vs. using a plain simple JS code that already works FINE on my live site?
If I'll have to mess around with a code anyway, then why should I familiarize myself with something new, if I already learned and successfully implemented something else?
And the question still stands why FW isn't good enough for the job?
I'm in Sweden, actually. So the right way to say would be-Jag inte talar på svenska.
Yeah, strangely enough they charge about twice as much in Copen than in London.
But thanks for your article, who knows, maybe I don't know something...We'll see...
As for changing the Joomla template to add rollovers-absolutely no need for that, since I can have templates with rollover buttons without any problem. I was asking about content, not menus and such.

This has turned into a riddle? I think I am just going to step away from this one. I was about to start making a menu tutorial for you. Now you say you don't want one. I didn't think you did until you posted the PSD which is of a menu. I wish you luck. I said in my previous post I would try to help you. The reason I am posting is to let you know, don't wait on me. I am not exactly sure what you want anymore. Good Luck

I think we have a language bareer here. Where did I say I needed a menu rollovers?
My menus in Joomla work fine as it is...
What I needed is to be able to create sort of a billboard image, advertisement. Basically, its just a background image  with one or more action clickable buttons. And I wanted to apply roll over effect to them.
I think it as clear as a day :-)

Yeah I was following you until you sent the picture of the navigation menu. I will give it a shot. I was riled up yesterday by another person on the board when I posted my last comment. I never thought you needed a nav menu, the picture threw me.

Hello cromartie1974, I finished a tutorial on a Fireworks simple rollover effect. The images I used aren't the greatest, I just wanted to make a quick example. This isn't enough to accomplish what you want, but it is the first step. When you finish this with your own images, let me know and I will move to step 2. Let me know if you run into any complications along the way. At the end, I saved the file by using the Export Wizard and following the directions for a rollover. If you don't save it inside a folder, it will scatter them on your desktop or whatever location you choose. The file is a little large when you open it inside your browser, so you might have to scroll around to see it.

Unzip the files and open the .html file in a browser to see it work. You can view my .html file or the one you create, inside the file Fireworks adds comments to assist you further. The comments are noted by <!--Some instruction text here-->, these will help you place them inside of your site.

Link to the tutorial: Fireworks Simple Rollover Image Tutorial


rollover.zip

Is it a joke? The images are in 1000's of pixels in dimensions! Why is that? Can you change it to something more NORMAL. My screen resolution is 1280x800.

The point was for you to do the tutorial with your own images. I have a job and a family, or I would take the time to be perfect. I was only showing you that the tutorial does work. I will try to work some time in today to make it smaller if that helps you?

Noone is asking for perfection...I just don't see a point to create 1000's pixel big images. How they will look on my site? I'm sure the tutorial works, why not. I will try to follow it. Yes, please-when you have time, make them of a reasonable size. No rush. I still have a lot to learn in FW BEFORE I even get there.
But let's finish here and I will grant you your points. I kinda realized that it would be nice for me to know a bit more about the basics of FW before I get to real stuff.

I am not worried about the points, I am just trying to find you a good starting point. The tutorial in the link I sent you is using Fireworks. It should be simple enough for you to follow, even as a beginner. I haven't worked with FW and I was able to make a rollover yesterday. I have a lot of experience with other Adobe products, so maybe that helps.

What other Adobe products do you usually use?
OK then, when you have a chance, correct the code and I'll try to implement it on my live site to see how it works and then I'll try to do it myself in FW.

OK, I haven't used Joomla but I do use Wordpress. They should be similar. I am a little busy, but I should have some time in a few hours.

My advice is not to take the shortcut route. If you want to develop websites and or Flash sites, you should learn the tools needed. Take the time as it is worth it. If you don't you will find that the results are substandard and that you spend as much if not more time fixing minor bugs that either wouldn't exist if you used the right knowledge before hand or if they did pop up you would know how to fix them.

They only way to learn is to get int there and get your hands dirty.

OK, I finally found the time to resize the files for you. The image quality is bad, but good enough for you to do the tutorial.

rollover-smaller.zip

For flyingsquirel
You can't embrace the Universe. I'm 36 and I want to start making money before I turn grey. Studying for an indefinite time is not an option. Right now I live on about 250 bucks here. What isi 250 bucks a month for a 36 yo male? Nothing. So if I won't find in a near future a way to earn better money in a web designing business, I'd have to flip hamburgers at McD again for a 1000.
Therefore, some compromise should be found. Naturally, a Jack of all trades can't be a master in all of them. And naturally a web design firm where 4-5 professionals work together will create possibly a higher quality sites. BUT...its not unusual here in Copenhagen (which is about an hour train ride from where I live now) to charge 350(!!!) DKK per hour for their time. And 5 DKK=1US$.
Are you sure that all the mom and pop shops and startup small companies can afford that rates (and I'm pretty sure its before VAT, called moms here and that's another 25%). You do the math.
Of course, driving Porshe is more fun than VW Golf, but...Look how many people buy Porsches and how many stick to Golf.
Look after how many issues I have to take care to be a freelancer-finding new customers, money and tax matters, invoicing and contract signing, design issues-from general prototyping to minor picture adjustments, development-building a site from scratchand doing all the customization, SEO, statistical apps-Google Analytics, Woopra etc, Adwords, possible e-commerce solutions, language issues (here its not an English speaking country), text formatting. So  if on top of all of that we add learning to code, then that ship would SINK. I would simply have to find a PARTNER who will be a coder and who will solve customization, cross browser and other issues for a low fee (why low, because I will find him in a country where an average salary is about 300$ a month and where the average education level is pretty high).
EVENTUALLY, I want to learn Flash and even HTML, CSS and JS coding, so I would be able to keep more money to myself. But I have to start doing business ASAP, otherwise, it will become my another hobby (like what PC Tech job turned out for me in the end).

For jeremyjared74
Thanks a bunch!!!
I will take time to implement that on my site ASAP and I'll post here the results and all the issues.

Thanks!
Actually, I know about using animated GIFs as a replacement for Flash. Seen it a lot on sites in Baltic countries, as part of their banner advertisement. inbox.lv   inbox.lt

OK...When I open the rollovers in the browser they work fine.
But in Joomla they didn't work. It would surprised me if it did. I have things I don't understand.
My rollovers that do work were made like that:
I had a regular Joomla article with a photo and I wanted to make a rollover effect on it. So here is what I did.
I opened the article with an original photo with noeditor and got access to the article's code. At the bottom there was a HTML tag img and it looked
like this

<img src="images/stories/org0.jpg" border="0" etc.....

So I just added this id="img1"
Then I got that
<img src="images/stories/org0.jpg" id="img1" border="0" etc.....

2) I placed this code into Custom HTML Joomla module and placed it in a debug position of a template :


<script type="text/javascript">
(function () {
var el,
  id,
  imgSwap = { // Create the map of id to images  
    img1: { oldImg: 'images/stories/org0.jpg', newImg: 'images/stories/new0.jpg' }
  };
for (id in imgSwap) {
  if (imgSwap.hasOwnProperty(id)) {
    el = document.getElementById(id);
    if (el) {
      // Attach event handlers
      el.onmouseover = function (el, src) {
        return function () {
          el.src = src;
        };
      }(el, imgSwap[id].newImg);
      el.onmouseout = function (el, src) {
        return function () {
          el.src = src;
        };
      }(el, imgSwap[id].oldImg);
 // Preload images
   var preloadImg = new Image();
   preloadImg.src = imgSwap[id].newImg;
    }
  }
}
})();
</script>

That's all and it works fine on my site.
So what exactly I should do. Upload your files into my site's folder, but there's a whole bunch of small files or I should only use the 2 that make the effect?
Another thing is the code...When I open .html file in notepad, I see the guidance about which part of code I should use. Then do I ONLY copy-paste that part of code which is between the 2 lines
<!--======================== BEGIN COPYING THE HTML HERE ==========================-->
<!--========================= STOP COPYING THE HTML HERE =========================-->
What about the JS that is ABOVE the 1st line?

Maybe what we should do is this...
Right now I'm still going through the basics of FW because I realized that I HAVE to know at least the basics of an app if I want to utilize it in my workflow. It would take me a few days to the to web effects.
Right now I study vector tools and shapes.
Creating a rollover effect in FW is not a big deal. I did it before while watching a tutorial on youtube and it worked fine in a browser. My MAIN issue is HOW to implement it in JOOMLA. Otherwise, its gonna be useless for me (unless I abandon Joomla and use DW).
So just give me few days...Of course, you can still answer my previous post. Or maybe I should ask that at Joomla related forums? Or you might know the answer yourself?

OK, I have revised the files and narrowed it down the the minimal requirements to work. I don't know enough about Joomla to tell you how to place it. There are only 2 images now, and minimal HTML and JAVASCRIPT. You may have to add the javascript as a snippet? And place the html (you might have to update the image locations in the HTML to wherever they are stored in Joomla).

If the code you supplied above worked, why not use that for your new rollover. Just replace image names and locations?

Oops the files...

revised.zip

OK....so I'm about half way finished with my Fireworks CS4 Essential training, so I got to SYMBOLS and THERE we have BUTTONS. Finally!
As usual there're good news and bad. I managed to create fine (with Mr. Babbage's help) working rollover button. I only had to manually change the code (to adjust the correct location of the buttons 2 files (2 states of one button, basically) on my server. Also in FW I added a link to the button. So I placed the code into 2 places
1) A regular Joomla article opened with no editor so I could see the code.
2) Custom HTML Joomla module
In BOTH cases it worked. The only thing is...it does NOT work together, so I just disabled the Custom HTMLmodule and left the button at the bottom of the article.
BTW, I just placed ALL the code generated by FW all in one place...
Now...another thing which is unclear (don't know if it makes any difference), when I make export in FW, I get a choice where I can choose Generic or DW XHTML. I chose the former...
Now, the BAD thing is...for some stupid reason, despite the fact that I DID wrote www.google.com in Link box in FW, so it appears as a href=www.google.com ...when I tried to open the .htm file in my local PC's browser for a preview AND when I tried to click on a link on my site, there was the same problem.
Instead of www.google.com, it brings me file:///C:/Users/TM/Desktop/New%20folder/www.google.com
OR...in a latter case:
http://asylum-seeker.org/www.google.com
WHY is that??? and how it can be solved
Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>surf_button.gif</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Fireworks CS3 Generic target.  Created Fri Sep 24 16:56:12 GMT+0200 2010-->
<script language="JavaScript1.2" type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

//-->
</script>
</head>
<body bgcolor="#ffffff" onload="MM_preloadImages('images/stories/surf_button_s2.gif');">
<a href="www.google.com" target="_blank" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('surf_button_s1','','images/stories/surf_button_s2.gif',1);"><img name="surf_button_s1" src="images/stories/surf_button_s1.gif" width="192" height="58" border="0" id="surf_button_s1" alt="" /></a></body>
</html>

The buttons I will attach too, just in case.
And the URLs are
http://asylum-seeker.org/2010-06-14-00-09-09


surf-button-s1.gif
surf-button-s2.gif

It WORKS NOW!!!


I found a solution to the problem...Yes, thank you Sir for correcting the URL. I watched videos from YouTube and I also paid attention and corrected that.

Also, I realized that hotspots are not neccessary. So I don't even have to touch Hotspot tool. What I haven't done before was that I didn't make an Active Area slicing. Now I exported the button with the following setting:


HTML and Images
Export Slices

Current Page


I put checkmarks in all 3 boxes. And In Options I chose .htm and DW XHTML.


I changed the location of files in a code to match their physical location on the server and I just copy-pasted ALL the FW code into my existing Joomla article and everything works fine. Except that I didn't optimize my gif button with Matte, so the edges are jaggedy sort of. But that's not important.


As per Joomla...No miracles there, Sir and you really don't have to know it. Because basically Joomla doesn't do anything by itself. It just executes the HTML, JS codes and uses lots of CSS. If its a good working code-it works, if it doesn't-it doesn't. As simple as that.


I hope in the future chapers you will explain more about that Hotspot tool, and the connection between so called Active Area (I wonder why its even called like that), slices and links on buttons and such.


And another thing is...I still don't understand how I can make in FW a billbord bg image with a rollover button on top (call to action kinda button).

What should be a workflow?

Who are you talking about / to? You have lost me.

Sorry, I should probably make a correction. Yesterday I simply didn't pay attention about the place I was at...So I just removed the irrelevant parts.

Also, I realized that hotspots are not neccessary. So I don't even have to touch Hotspot tool. What I haven't done before was that I didn't make an Active Area slicing. Now I exported the button with the following setting:


HTML and Images
Export Slices

Current Page


I put checkmarks in all 3 boxes. And In Options I chose .htm and DW XHTML.
I changed the location of files in a code to match their physical location on the server and I just copy-pasted ALL the FW code into my existing Joomla article and everything works fine. Except that I didn't optimize my gif button with Matte, so the edges are jaggedy sort of. But that's not important.
And another thing is...I still don't understand how I can make in FW a billbord bg image with a rollover button on top (call to action kinda button).

What should be a workflow?