Jump to content
dev osCommerce
Forum
  • Checkout
  • Login
  • Contact Us
  • Get in touch

osCommerce

The e-commerce.

New Demo
Our Partners

Rollovers from Photoshop

zbaum00

By zbaum00
in General Support

Recommended Posts

zbaum00

zbaum00

Posted
Posted

I sliced up my header using image ready in photoshop and the test page that it exports wroks fine. The rollovers work. Then I put the image in the header.php that was fine and then put the javascript in the index.php file in the <heaad> tag. I get no errors on the page but the rollovers dont work

 

Any suggestions?

Is there somewhere else I can put the javascript maybe?

Aziz

Aziz

Posted
Posted

Let the java script be an independent file and include it..

 

Make sure that the names are not famous, e.g. home move ect..

 

it should then work

 

Salam,

--------------------------------

zbaum00

zbaum00

Posted
  • Author
Posted

I tried making it an external file and embed the file call in the <header> section of index.php, but the rollovers are still not working and I am not getting any JS errors.

 

Any other ideas?

surfking

surfking

Posted
Posted

Javascript should be in the header. The rollovers will only work in the index.php page if they you are on that page. If you have the Javascript in the header, the javascript will be enacted on every oscommerce page. Tell me if this helps.

zbaum00

zbaum00

Posted
  • Author
Posted

Yeah I do have the javascript in the <head> on index.php, but the function calls are in the header.php files, but it should work and I'm getting no errors and I tried making it an external file and still dosen't work.

zbaum00

zbaum00

Posted
  • Author
Posted

Here is the rollover.js file contents (all generated by photoshop and all worked in the test page generated, so I know the code is okay):

 

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].src = changeImages.arguments[i+1];

}

}

}

 

var preloadFlag = false;

function preloadImages() {

if (document.images) {

header_06_over = newImage("images/header_06-over.jpg");

header_06_header_07_over = newImage("images/header_06-header_07_over.jpg");

header_07_over = newImage("images/header_07-over.jpg");

header_08_header_09_over = newImage("images/header_08-header_09_over.jpg");

header_08_over = newImage("images/header_08-over.jpg");

header_08_header_07_over = newImage("images/header_08-header_07_over.jpg");

header_09_over = newImage("images/header_09-over.jpg");

header_09_header_08_over = newImage("images/header_09-header_08_over.jpg");

preloadFlag = true;

}

}

 

Then here is the call to the rollover.js file in the index.php <header> section

 

<script language ="JavaScript" type="text/javascript" src="rollover.js"></script>

 

Finally this the actual functions being used in the header.php file:

 

<!-- ImageReady Slices (header.psd) -->

<TABLE WIDTH=750 BORDER=0 CELLPADDING=0 CELLSPACING=0>

<TR>

<TD ROWSPAN=3>

<IMG SRC="images/header_01.jpg" WIDTH=15 HEIGHT=156 ALT=""></TD>

<TD COLSPAN=7>

<IMG SRC="images/header_02.jpg" WIDTH=735 HEIGHT=91 ALT=""></TD>

</TR>

<TR>

<td align="center" class="boxText" background="images/header_03.jpg" WIDTH=107 HEIGHT=28>

<form name="quick_find" action="/catalog/advanced_search_result.php" method="get">

<input type="text" name="keywords" size="10" maxlength="30" style="width: 95px"></TD>

<TD>

<input type="image" src="images/header_04.jpg" WIDTH=95 HEIGHT=28 border="0" alt="Quick Find" title=" Quick Find "></form></TD>

<TD>

<IMG SRC="images/header_05.jpg" WIDTH=221 HEIGHT=28 ALT=""></TD>

<TD>

<A HREF="#"

ONMOUSEOVER="changeImages('header_06', 'images/header_06-over.jpg'); return true;"

ONMOUSEOUT="changeImages('header_06', 'images/header_06.jpg'); return true;">

<IMG NAME="header_06" SRC="images/header_06.jpg" WIDTH=77 HEIGHT=28 BORDER=0 ALT=""></A></TD>

<TD>

<A HREF="#"

ONMOUSEOVER="changeImages('header_06', 'images/header_06-header_07_over.jpg', 'header_07', 'images/header_07-over.jpg', 'header_08', 'images/header_08-header_07_over.jpg'); return true;"

ONMOUSEOUT="changeImages('header_06', 'images/header_06.jpg', 'header_07', 'images/header_07.jpg', 'header_08', 'images/header_08.jpg'); return true;">

<IMG NAME="header_07" SRC="images/header_07.jpg" WIDTH=89 HEIGHT=28 BORDER=0 ALT=""></A></TD>

<TD>

<A HREF="#"

ONMOUSEOVER="changeImages('header_08', 'images/header_08-over.jpg', 'header_09', 'images/header_09-header_08_over.jpg'); return true;"

ONMOUSEOUT="changeImages('header_08', 'images/header_08.jpg', 'header_09', 'images/header_09.jpg'); return true;">

<IMG NAME="header_08" SRC="images/header_08.jpg" WIDTH=66 HEIGHT=28 BORDER=0 ALT=""></A></TD>

<TD>

<A HREF="#"

ONMOUSEOVER="changeImages('header_08', 'images/header_08-header_09_over.jpg', 'header_09', 'images/header_09-over.jpg'); return true;"

ONMOUSEOUT="changeImages('header_08', 'images/header_08.jpg', 'header_09', 'images/header_09.jpg'); return true;">

<IMG NAME="header_09" SRC="images/header_09.jpg" WIDTH=84 HEIGHT=28 BORDER=0 ALT=""></A></TD>

</TR>

<TR class="headerNavigation">

<td COLSPAN=7 class="headerNavigation" background="images/header_10.jpg" WIDTH=735 HEIGHT=37 ALT="">  <?php echo $breadcrumb->trail(' » '); ?> </td>

 

<TR>

</TABLE>

<!-- End ImageReady Slices -->

Guest

Guest

Posted
Posted
Yeah I do have the javascript in the <head> on index.php, but the function calls are in the header.php files, but it should work and I'm getting no errors and I tried making it an external file and still dosen't work.

I believe he meant that the javascript should be in header.php

zbaum00

zbaum00

Posted
  • Author
Posted

I dont think the ja vascript can be in the header.php file becasue javascript is supposed to go in the <header> tags and that is in the index.php file

ryanf

ryanf

Posted
Posted

This is the rollover script that I use on my page:

 

<a href="http://www.abdulky.com/catalog/index.php?cPath=23" onMouseOver="if(document.images) document.necklace.src='images/index/necklaces_on.gif';" onMouseOut="if(document.images) document.necklace.src='images/index/necklaces.gif';"
onFocus="if(this.blur)this.blur();">
<img name="necklace" src="images/index/necklaces.gif" border="0"></a>

 

Then you dont need any javascript else where. I preloaded the images in index.php.

If I was crafty, this would be a funny signature.

zbaum00

zbaum00

Posted
  • Author
Posted

I figured out my problem, I forgot to include the onload in the <body> tag in index.php

 

-thanks for everones help

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...