The Trouble With Photoshop.....

[AndyCockburn]

Hello there folks. Im andy, a budding web designer. Im currently doing websites for MMORPG guilds, both for practice, fun and to build myself a bit of a portfolio should I choose to go for a web design job.

The problem is, Im one of those people who hates manuals, they confuzzle the hell out of me, and the Photoshop manual is a prime example. I want to do something which is probably exceedingly simple, however I cant figure out how.

I want to create some vaguely interesting link icons, so I have two images: one with the fancy text on, and another identical image with the same text, however I added a little extra bit of work to it. I did both the images in Paint Shop Pro.

What I want to do is create a rollover graphic from these two images, where the standard link image is displayed when the page loads, but when a browser moves their mouse over it, the second, arty image appears.

I am aware this can be achived with javascript, however Im still self-teaching that at the moment, and so I would prefer if someone could explain in laymans terms with easy instructions how to accomplish the same thing in PS, or point me to a website with a tutorial.

Many thanks,
Andy

[DaveSW]

I h8 manuals too... particularly thick ones!

Well, Adam Brill has a demonstration of how to use javascript to do it on his site: http://www.code4ever.com/free/rollovers.htm


I personally prefer to use css - it's more accessible for certain things. e.g. a menu I built for an electrical engineering company uses css and looks like this: http://www.webdevfaqs.com/cssmenus/ppc/

http://www.webdevfaqs.com/css.php might be useful

Do you know any CSS?

[AndyCockburn]

Im afraid I dont. I bought myself one of those "teach yourself HTML in 24 hours" books and learned the whole thing in about 6(it explained things in simple terms, so I got it all no trouble), hehe, but I cant find similar books for other languages here in the UK.

Ill admit I wasnt even aware of CSS until I saw it mentioned on these boards, I was working with HTML and a few scripts I pulled off the web done in java or VB script.

Is CSS easy to work with if you use netscape? I use linux and its too much hassle to run IE(plus Im not exactly fond of IE, its a mess IMO).

[DaveSW]

CSS runs in most browsers these days. It's only when you get back to version 4 browsers that things get a bit dodgy, but then you are going back 5 years or so.

The only thing you won't have using netscape is some of the bugs that IE throws up - mostly minor though.

One site I would recommend - as a good one for those of us who dislike manuals, is www.w3schools.com - there is an option there to learn by examples, which is quite useful. They teach most languages there. (as in css, rather than french!)

[AndyCockburn]

Thanks man, there was a link to them on the site you gave me, hehe. I didnt realise CSS was style sheets, I know a bit about those. Im interested to see how this can improve my site. I can use style sheets with frames yes?

IE, can I apply a style sheet to one frame and still see the effects? Seeing as the browser loads the frameset document and not the individual page, or will the browser still recognise that it needs to apply the SS?

Hmm, I cant seem to find the CSS script that would aloow me to do what I want, I will learn CSS now you've pointed me towards it, but that will take a while.

Can anyone answer my original question about how to accomlish rollover images in photoshop please? I really need to have this site finished within a couple of days and this is one of the few things I have left too do.

[DaveSW]

If you send me your pics I'll try and do it for you with javascript, or if it's suitable, CSS. I don't know if photoshop will do it for you though.

Oh yeah, styles on frames is ok.

[retrocity]

Dave, it's pretty quick and dirty with ImageReady (PS's sister app). it has a built-in "rollover" function where all you need to do is select the first state (default) and turn on/off the layers (in the photoshop file) that you want for the second state (over). it's "machine" code but still easy enough to understand and modify (if needed) and it even throws in a "preload" image CODE to boot!

:)
retrocity

[DaveSW]

I don't actually use Photoshop myself (too expensive!).

[metallibanger]

Photoshop can make the images for you, but not make it be a rollover, that's done with javascript or css not a graphics program. When doing rollovers, always make sure that both graphics are the same dimentions, and it'll work fine. I always use Dreamweaver for site layout, so it codes the scripting for you. It's probably excessive, but it works nicely. Just find any freeware WYSIWYG editor and it'll be able to help you out with the rollovers.

Andy Oliphant
A&M Design Studios

[retrocity]

Originally posted by metallibanger
Photoshop can make the images for you, but not make it be a rollover, that's done with javascript or css not a graphics program. ...Andy Oliphant
A&M Design Studios

Andy O, i agree up to a point... PS is best suited for "making" the graphical elements, BUT, used in conjunction with ImageReady (the sister app bundled with PS) you can quickly create rollover navigation by simply turning on and off different layers. When saving the file, ImageReady adds JavaScript code to the resulting HTML file to specify rollover states. As i stated before "machine" code isn't always the best when modifying but IR's code is pretty straight-forward. So for those times when you don't have enough time or just want a quick rollover and you're already using PS to build your elements, jumping to IR for making your slices and code is a good way to go. (at least for the rollover states, i wouldn't use it to build the whole web page. there are far better apps out there for that...)

:)
retrocity

[mcemond]

Here is a html page with only one rollover button. Just put your own image in where you see ../your_folder/your_fancy_button.gif or ../your_folder/your_plain_button.gif
Hope this helps,
Mike


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
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];}}
}

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];}
}
//-->
</script>
</head>

<body onLoad="MM_preloadImages('../your_folder/your_fancy_button.gif')">
<a href="yourpage.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','../your_folder/your_fancy_button.gif',1)"><img src="../your_folder/your_plain_button..gif" alt="rollover image" name="Image1" width="286" height="67" border="0"></a>
</body>
</html>