Solved

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

Posted on 2010-09-09
41
625 Views
Last Modified: 2013-12-13
Hello everyone!

Finally, I finished studying Photoshop CS4 Standard basics. Thanks God.
I'm a webmaster and web developer using CMS (therefore I don't need Adobe Dreamweaver).
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 want to keep it simple and to know an easy and painless way to create a CLICKABLE rollover graphics (JS based)for the web (buttons etc). I'm talking about graphics in headers, articles and banners.
I already know how to create rollovers with JS and it works fine on my web site (with A.Jolie picture).
But to make it manually is somewhat inconvinient and time consuming.
So I want to find a better and quicker way.
I do have also Fireworks CS5.
I know how to create layer comps in PS and I know slicing.
I also use a script to export small graphic files out of a composition
in which I have 2 types of buttons that I created with Styles palette and placed on 2 different states in layer comps window.
I also know how to make URLs with slice options...
The only thing I know about Fireworks is how to create a clickable hotspot in Image Map (without rollovers). Then I save it as .html file, open it in notepad and copy-paste a relevant part of HTML code into my CMS. And without rollovers it actually works on my live site.
But here I have an issue...In order to insert a graphics in site's header (say, if I use Artisteer) I need to choose a GRAPHIC file, and NOT .html file or a code. It might be a silly question, but without HTML code attached, just a plain regular graphic file , could it be clickable at all?
So I can seriosly learn Fireworks now. But I don't know if its worth it if my only goal is what I described above.
Could you tell me how it should be done in Fireworks if its simple enough to grasp. If not...what should I do now?

Thanks in advance!
0
Comment
Question by:cromartie1974
  • 21
  • 16
  • 3
  • +1
41 Comments
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 33638482
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.
0
 

Author Comment

by:cromartie1974
ID: 33639224
I use Joomla...
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 33639336
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?
0
 

Author Comment

by:cromartie1974
ID: 33639374
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.
0
 

Author Comment

by:cromartie1974
ID: 33639387
I don't use image editors in Joomla...I have a folder for images and I simply insert images from there into articles.
0
 

Author Comment

by:cromartie1974
ID: 33639404
I meant LEARNING the application in the last sentence of my post above....
0
 

Author Comment

by:cromartie1974
ID: 33639428
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?
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 33639449
Sure, give me a moment, and I will make an example for you and take some screenshots.
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 33640034
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/
0
 

Author Comment

by:cromartie1974
ID: 33642080
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
0
 

Author Comment

by:cromartie1974
ID: 33642095
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.
0
 
LVL 26

Expert Comment

by:David Brugge
ID: 33686935
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.


0
 

Author Comment

by:cromartie1974
ID: 33687709
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.
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 33688295
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.
0
 
LVL 26

Expert Comment

by:David Brugge
ID: 33688426
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.




0
 
LVL 26

Expert Comment

by:David Brugge
ID: 33688433
0
 

Author Comment

by:cromartie1974
ID: 33689371
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.
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 33689413
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
0
 

Author Comment

by:cromartie1974
ID: 33689807
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 :-)

0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 33690866
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.
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 23

Expert Comment

by:jeremyjared74
ID: 33692674
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
0
 

Author Comment

by:cromartie1974
ID: 33700714
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.
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 33701168
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?
0
 

Author Comment

by:cromartie1974
ID: 33702027
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.
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 33702159
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.
0
 

Author Comment

by:cromartie1974
ID: 33702753
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.
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 33702938
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.
0
 
LVL 4

Expert Comment

by:flyingsquirel
ID: 33712600
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.
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 33715967
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
0
 

Author Comment

by:cromartie1974
ID: 33716557
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).
0
 

Author Comment

by:cromartie1974
ID: 33716579
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.
0
 
LVL 23

Accepted Solution

by:
jeremyjared74 earned 500 total points
ID: 33717853
Also cromartie1974: I learned a cool trick this weekend on how to create a flash type header without knowing flash. It is real simple using Fireworks. This can get you by until you learn some flash. What I did is:

Save 4(or whatever you want) images a png's

  1. Open Fireworks and click file>new. Choose the dimensions for your flash piece.
  2. Navigate to the STATES palette located in the Layers Paulette or choose Window>States.
  3. Now from the states options (the small arrow in the top right of the tool palette) choose add States. You can choose however many you want. This will decide how many transitions your flash piece will have (which will be actually be an animated GIF).
  4. You will need to change the time between the states, or else it will be like an image strobe-light meaning they will be crazy fast transitions. Click on the number to the right of the State in the states palette. I thing default will be 7/100 sec. Change the 7 to 400 for 4 sec, 500 for 5 sec. etc... You double click the current setting to change this.
  5. Almost finished, now choose file>save as, and select animated GIF from the file type drop-down list and save the image. You can open it by choosing open with, and selecting a browser from the menu options
If you want text, or a skin for the "slide-show" you can open Photoshop and create a background or skin for the images. Just place the image inside of Photoshop above the skin layer and add text if you want. Now choose file>save for web>jpg or png if you don't want a background. For the next image in the slide-show, just delete the previous images layer and place the new image. Repeat the save for web step. Repeat this for all your images. Now you just follow the Fireworks steps I mentioned above and you have a slide-show with text and a skin.

I will send a sample GIF, just open it using Fireworks and you will see how I set it up.

lizardsr.gif
0
 

Author Comment

by:cromartie1974
ID: 33721280
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
0
 

Author Comment

by:cromartie1974
ID: 33721704
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?
0
 

Author Comment

by:cromartie1974
ID: 33721758
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?
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 33721775
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?
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 33721779
Oops the files...

revised.zip
0
 

Author Comment

by:cromartie1974
ID: 33754914
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
0
 

Author Comment

by:cromartie1974
ID: 33758822
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?
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 33759094
Who are you talking about / to? You have lost me.
0
 

Author Comment

by:cromartie1974
ID: 33760821
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?
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Add text with photoshop 6 43
Color? 8 91
Images 20 94
Adobe Acrobat Pro: Is this a known bug? 9 59
I've been using this technique since Adobe CS2, and it should work with any version of Illustrator that includes the appearance panel. In this tutorial we'll create a button using the appearance panel in Adobe Illustrator, and then save it as a r…
Keep your audience engaged and get the most out of your next presentation with these quick Prezi tips.
Learn how to set up basic frames and paths in Prezi and understand the open space that Prezi allows you to create presentations in.
It’s easy to embed any of your public Prezi presentations on your website or social network to share with others. Learn how simple it is in this tutorial.

747 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

13 Experts available now in Live!

Get 1:1 Help Now