|
|||||||||
|
|||||||||
| |||||||||
|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
|
|
#1
September 28th, 2004, 09:23 PM
|
|||
|
|||
Image Ready Roll-Overs
Hi I am new to this forum. Please help me... I created some roll-overs in individual Photoshop and Image Ready documents... they work fine as individual photoshop files in Image Ready. However, when I try to move/copy them into a new Photoshop/ImageReady document they do not work.
How can I move/copy them into another Photoshop/Image Ready document so that they still work... to then later save as HTML and move as a web page... ReeseStudios@aol.com
|
|
#2
September 29th, 2004, 07:53 AM
|
||||
|
||||
|
If you try to copy/paste to another document it will probably not work.
My advice is to edit the image in Photoshop then copy paste to Image Ready and then Edit the actions asociated with the image. As a general advice, it is always better to edit everything in one place. You can then split the project in multiple pieces(files) if needed.  Good luck, Silver.
|
|
#3
October 6th, 2004, 11:14 AM
|
||||
|
||||
|
Quote:
Is ImageReady your only HTML editor? How familiar are you with HTML? When I want good rollovers, I make a button in Photoshop, save the unflattened PSD file, and then save it as something like "home-normal.jpg". Then I re-open the unflattened file, make my changes (for the rollover appearance) and save it as "home-over.jpg". I use DreamWeaver as my HTML editor. If you don't have DW, here's what you'll need: This goes in your HEAD area. Code:
<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>
Replace your BODY tag, using this as an example. Replace the directory with your own and the file names with all of your "over" images. Code:
<body onload="MM_preloadImages('/robb-barrett/connected/clients-over.jpg','/robb-barrett/connected/services-over.jpg','/robb-barrett/connected/contact-over.jpg')">
Then, wherever you want your images, put in code like this. Note that I just plopped these all on a page, so you may have to put them in tables or wherever you'll want them: Code:
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','/robb-barrett/connected/clients-over.jpg',1)"><img src="/robb-barrett/connected/clients.jpg" name="Image1" width="170" height="55" border="0" id="Image1" /></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','/robb-barrett/connected/services-over.jpg',1)"><img src="/robb-barrett/connected/services.jpg" name="Image2" width="170" height="55" border="0" id="Image2" /></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','/robb-barrett/connected/contact-over.jpg',1)"><img src="/robb-barrett/connected/contact.jpg" name="Image3" width="170" height="55" border="0" id="Image3" /></a>
Does this make sense?
|
|
#4
October 6th, 2004, 02:27 PM
|
|||
|
|||
|
Image ready works great to make the images for your web page, but once a viewer goes to load the web page, all the sudden it takes 2minutes for it to load because everything on your web page, even the text, is an image. You basically made one giant image and plopped it inside an html and body tag. It makes it difficult to edit and viewers get fed up with the long load times.
Also, if you try to use ImageReady to make your entire web page, it likes to write really nasty complicated HTML code with 60 million transparent pixel images called Spacer.gif. It makes it, when you do learn html if you don't already know it, impossible to find what you want to edit. Your best bet is to find yourself some kind of html WSIWYG editor like Dreamweaver or GoLive(?). Even Frontpage (I know, every web designer/programmer goes GASP!) would be helpful. Really, HTML is a very easy programming language to learn, and the javascript that you need to make it more interactive can be found on the internet for free. So if you can't get a WSIWYG editor, get yourself a book on html such as one of the Visual Quickstart guides. Hope this helps!
|
|
#5
October 7th, 2004, 01:41 PM
|
||||
|
||||
|
Quote:
In all fairness, you can set your page background to the color of your IR background and delete all of the spacers. But you're absolutely right about the code-bloat that IR causes. IR also makes it difficult to do some layer differences in roll-overs. This is why I prefer to just make the two seperate images on my own and manually enter them. To reduce total site bloat, I do my pages in PHP so I can take my rollover Javascript and save it into a "preload.php" file, then on each page just put a tag like PHP Code:
This way my files sizes are smaller and my pages are cleaner on the back end.
|
|
| Viewing: Dev Shed Forums > Web Design > Photoshop Help > Image Ready Roll-Overs |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
