Smarty Forum Index Smarty
The discussions here are for Smarty, a template engine for the PHP programming language.
Mouse Over Images - Smarty - XCart

 
Post new topic   Reply to topic    Smarty Forum Index -> Tips and Tricks
View previous topic :: View next topic  
Author Message
Z
Smarty n00b


Joined: 03 Aug 2004
Posts: 1
Location: NZ

PostPosted: Tue Aug 03, 2004 12:11 pm    Post subject: Mouse Over Images - Smarty - XCart Reply with quote

Hope someone can help me with this little one.

I have an html page with I am trying to integrate into the smarty templates used by xcart.

The html page has both mouseover images in the navigation and looping images as part of the design.


The thing is - smarty doesnt seem to like the java code and some of the functions.

For example I get this error

Fatal error: Smarty: [in head.tpl line 23]: syntax error: unrecognized tag: preLoad[i] = new Image() preLoad[i].src = Pic[i] (Smarty_Compiler.class.php, line 3 in C:\Inetpub\wwwroot\snhcollection.co.nz\xcart\Smarty-2.5.0\Smarty_Compiler.class.php on line 1832

Here is the HTML File

<html>
<head>
<title>The S&H Collections - Coming Soon</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT>

var slideShowSpeed = 4400

var crossFadeDuration = 2

var Pic = new Array()

Pic[0] = 'images/top_02.jpg'
Pic[1] = 'images/top_021.jpg'
Pic[2] = 'images/top_023.jpg'
Pic[3] = 'images/top_022.jpg'

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}

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_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_findObj(n, d) { //v4.0
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 && document.getElementById) x=document.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>

<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>

Hope someone can help

Thanks heaps

Tim
Back to top
View user's profile Send private message Visit poster's website
boots
Administrator


Joined: 16 Apr 2003
Posts: 5613
Location: Toronto, Canada

PostPosted: Tue Aug 03, 2004 3:26 pm    Post subject: Reply with quote

It's a sticky topic and in the very forum you posted to, but what the heck:

http://www.phpinsider.com/smarty-forum/viewtopic.php?t=1067
Back to top
View user's profile Send private message
jyurkiw
Smarty Rookie


Joined: 03 Dec 2004
Posts: 5

PostPosted: Thu Mar 10, 2005 11:46 pm    Post subject: why don't you... Reply with quote

boots wrote:
It's a sticky topic and in the very forum you posted to, but what the heck:

http://www.phpinsider.com/smarty-forum/viewtopic.php?t=1067


Don't use javascript for the rollovers...use CSS instead.

The :hover and :click meta properties are just what you're looking for!

The HTML and CSS will look somthing like this...

Code:

<html>

<head>
<style type="text/css">

a {
   position: relative;
   border: 0;
   left: 100px;
   top: 50px;
}

a div {
   position: absolute;
   background-image: url(apache_pb2.gif);
   width: 259px;
   height: 32px;
}

a:hover div {
   background-image: url(apache_pb.gif);
}

</style>
</head>

<body>

<a href="#">
   <div id="cssbutton"></div>
</a>

</body>

</html>


When testing on your computer...IE will act a bit twitchy if you have the html file in a path with spaces in the name...I don't know why (more MS magic I guess...)...and you'll need to replace my gifs with your own images (i just pulled them from my computer's apache folder)

Also, the height and width of the div needs to match the height and width of your image or else the selection area of the link will be smaller than the image...it will also screw up the flow of your page because the images will bleed over into the surrounding area.

Anyway...

http://www.alistapart.com has some great CSS tutorials and articles. Just hit the CSS tap on the right-hand side menu and look up the articals on Horizontal Drop Down Menus and Suckerfish Dropdown menus.

They work with offboard CSS, about 5 lines of javascript, and work like magic with Smarty (template once...import many) Smile
Back to top
View user's profile Send private message
Display posts from previous:   
Post new topic   Reply to topic    Smarty Forum Index -> Tips and Tricks All times are GMT
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group
Protected by Anti-Spam ACP