Getting ImageReady Rollovers into WordPress – Help!

  • eric40

    (@eric40)


    13 years, 9 months ago

    Hello. I started a similar topic some time ago and then got away from the whole thing for a while, but the answers I got back then were a little beyond my understanding. I’ve searched the forums and haven’t found anything that quite got me where I needed to go.

    I want to create a rollover effect along with a slice in Imageready, (bundled with Photoshop 7). I am starting very simply with a solid square to change to another color, just the simplest thing so I can learn the process. So here’s what I’ve done and the problem I’m having..

    I created the slice and the rollover state and all that..then saved optimized as. An hotmail document along with an images folder containing all the necessary images were generated. I ftp’d these to my server. I opened the html document in a live browser page so I could “view source”, then copied the entire code there, which I pasted into my wordpress page in html mode, not visual.

    Then because I don’t know a better way, I manually changed the image paths in the code to point to the images folder that I created. I then updated my page.

    The problem:

    When I view the page where the rollover should appear, I get this. You may have to scroll down a bit to see the mess.

    I can see that the code can’t find my images, but I’m not sure why..they seem to point to the right place. As I think is correct, I uploaded the hotmail file and the images folder to the the following directory: http://myurl.net/wp-content/uploads. This means of course that they are not in the …uploads/2010/… directory where other images go by default. Does that matter? Also, why is that script appearing on the page? The rollover functioned fine in the Imageready ‘preview in browser’ mode.

    I am using the Atahaulpa3.4.6 theme if that helps at all.

    What crucial steps am I missing? I will be so relieved to finally get this going. I’ve been trying to learn this off and on for months!

    Also, in case it helps, here is the code generated by Imageready for the rollover I want to use..

    <HTML>
<HEAD>
<TITLE>little brown square</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (little brown square.html) -->
<SCRIPT TYPE="text/javascript">
<!--

function newImage(arg) {
	if (document.images) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}

function changeImages() {
	if (document.images && (preloadFlag == true)) {
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
		}
	}
}

var preloadFlag = false;
function preloadImages() {
	if (document.images) {
		dark_brown_over = newImage("images/dark-brown-over.gif");
		little_brown_square_05_dark_brown_over = newImage("images/little-brown-square_05-dark.gif");
		preloadFlag = true;
	}
}

// -->
</SCRIPT>
<!-- End Preload Script -->
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 ONLOAD="preloadImages();">
<!-- ImageReady Slices (little brown square.html) -->
<TABLE WIDTH=300 BORDER=0 CELLPADDING=0 CELLSPACING=0>
	<TR>
		<TD COLSPAN=3>
			<IMG SRC="images/little-brown-square_01.gif" WIDTH=300 HEIGHT=42 ALT=""></TD>
	</TR>
	<TR>
		<TD ROWSPAN=2>
			<IMG SRC="images/little-brown-square_02.gif" WIDTH=24 HEIGHT=258 ALT=""></TD>
		<TD>
			<A HREF="meatshop101.com" TARGET="_blank"
				ONMOUSEOVER="changeImages('dark_brown', 'images/dark-brown-over.gif', 'little_brown_square_05', 'images/little-brown-square_05-dark.gif'); return true;"
				ONMOUSEOUT="changeImages('dark_brown', 'images/dark-brown.gif', 'little_brown_square_05', 'images/little-brown-square_05.gif'); return true;">
				<IMG NAME="dark_brown" SRC="images/dark-brown.gif" WIDTH=249 HEIGHT=217 BORDER=0 ALT=""></A></TD>
		<TD ROWSPAN=2>
			<IMG SRC="images/little-brown-square_04.gif" WIDTH=27 HEIGHT=258 ALT=""></TD>
	</TR>
	<TR>
		<TD>
			<IMG NAME="little_brown_square_05" SRC="images/little-brown-square_05.gif" WIDTH=249 HEIGHT=41 ALT=""></TD>
	</TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>

    Thank you so much, and if there’s anything else I can tell you that will help with a solution, just ask.

Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Getting ImageReady Rollovers into WordPress – Help!’ is closed to new replies.