|
Smarty
WARNING: All discussion is moving to https://reddit.com/r/smarty, please go there! This forum will be closing soon. |
|
View previous topic :: View next topic |
Author |
Message |
Z Smarty n00b
Joined: 03 Aug 2004 Posts: 1 Location: NZ
|
Posted: Tue Aug 03, 2004 12:11 pm Post subject: Mouse Over Images - Smarty - XCart |
|
|
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 |
|
boots Administrator
Joined: 16 Apr 2003 Posts: 5611 Location: Toronto, Canada
|
|
Back to top |
|
jyurkiw Smarty Rookie
Joined: 03 Dec 2004 Posts: 5
|
Posted: Thu Mar 10, 2005 11:46 pm Post subject: why don't you... |
|
|
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) |
|
Back to top |
|
|
|
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
|