Jump to content

How to import a rolleover button in Prestashop


Recommended Posts

Hello,

 

I have created a rollover button with external software and it's working fine, but I do not know how and what I have to import - copy/paste in Prestashop for example to have it on my Image slider or any other banner in my Front Page.

 

Is this possible? If not how can I create a rolleover button inside Prestashop?

 

Thanks for you feedback.

Link to comment
Share on other sites

Hello Vekia,

 

Since I'm not a programmer I copy/paste everything, maybe with some unnecessary info

QUOTE

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Serif DrawPlus X5">
<title>Serif DrawPlus X5 Export</title>
 
<!-------------------------------------------------------------------------------
---- The JavaScript below needs to be copied and pasted into the <head> section -
---- of your HTML file. Begin copying the JavaScript below this line. ---------->
 
<script language="JavaScript">
<!--
function Serif_findObj(n, d) { //v5.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[n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=Serif_findObj(n,d.layers.document); return x;
}
 
function Serif_navBar(event, grpName) { //v5.0
  var i,img,nbArr,args=Serif_navBar.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = Serif_findObj(args[2])) != null && !img.Serif_init) {
      img.Serif_init = true; img.Serif_up = args[3]; img.Serif_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = Serif_findObj(args)) != null) {
        if (!img.Serif_up) img.Serif_up = img.src;
        img.src = img.Serif_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.Serif_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = Serif_findObj(args)) != null) {
      if (!img.Serif_up) img.Serif_up = img.src;
      if (img.Serif_dn && args[i+2]) 
        img.src = args[i+2];
 else if (args[i+1])
        img.src = args[i+1];
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.Serif_nbOver.length; i++) {
      img = document.Serif_nbOver; img.src = (img.Serif_dn) ? img.Serif_dn : img.Serif_up; }
  } else if (event == "down") {
    if ((nbArr = document[grpName]) != null)
      for (i=0; i < nbArr.length; i++) { img=nbArr; img.src = img.Serif_up; img.Serif_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = Serif_findObj(args)) != null) {
      if (!img.Serif_up) img.Serif_up = img.src;
      img.src = img.Serif_dn = args[i+1];
      nbArr[nbArr.length] = img;
  } }
}
//-->
</script>
 
<!-- Stop copying the JavaScript above this line. -------------------------------
-------------------------------------------------------------------------------->
 
</head>
 
<body>
 
<!-------------------------------------------------------------------------------
---- The HTML below needs to be copied and pasted into the <body> section of ----
---- your HTML file. Begin copying below this line. ---------------------------->
 
<a href="http://www.balmidor.be/lang/11-general-purpose-cloth-assorted.html " onmouseout="Serif_navBar('out');" onmouseover="Serif_navBar('over', 'Recycletestutton', 'Recycle test utton_h.jpg', '', 1);" onclick="Serif_navBar('down', 'navbar1', 'Recycletestutton', 'Recycle test utton_d.jpg', 1);"><img name="Recycletestutton" src="file:///C:/Users/Vancon/Documents/Dropbox/Balmidor/SerifDrawPlus/Recycle%20test%20utton.jpg" width="119" height="143" border="0" title="Buy Now General Purpose e-cloth" alt="Buy Now General Purpose e-cloth"></a>
 
<!-- Stop copying the HTML above this line. -------------------------------------
-------------------------------------------------------------------------------->
 
 
 
 
<!-------------------------------------------------------------------------------
---- This HTML file was automatically generated by Serif DrawPlus X5 -------------

--------------------------------------------------------------------------------></body>

Unquoate 

 

Thanks again for your help.

Link to comment
Share on other sites

{literal}
<script language="JavaScript">
<!--
function Serif_findObj(n, d) { //v5.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=Serif_findObj(n,d.layers[i].document); return x;
}

function Serif_navBar(event, grpName) { //v5.0
  var i,img,nbArr,args=Serif_navBar.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = Serif_findObj(args[2])) != null && !img.Serif_init) {
      img.Serif_init = true; img.Serif_up = args[3]; img.Serif_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = Serif_findObj(args[i])) != null) {
        if (!img.Serif_up) img.Serif_up = img.src;
        img.src = img.Serif_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.Serif_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = Serif_findObj(args[i])) != null) {
      if (!img.Serif_up) img.Serif_up = img.src;
      if (img.Serif_dn && args[i+2]) 
        img.src = args[i+2];
 else if (args[i+1])
        img.src = args[i+1];
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.Serif_nbOver.length; i++) {
      img = document.Serif_nbOver[i]; img.src = (img.Serif_dn) ? img.Serif_dn : img.Serif_up; }
  } else if (event == "down") {
    if ((nbArr = document[grpName]) != null)
      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.Serif_up; img.Serif_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = Serif_findObj(args[i])) != null) {
      if (!img.Serif_up) img.Serif_up = img.src;
      img.src = img.Serif_dn = args[i+1];
      nbArr[nbArr.length] = img;
  } }
}
//-->
</script>
{/literal}

pate code above to header.tpl file located in your theme directory, somewhere between <head></head>

 

 

 

then use this code:


there - where you want to display button.

 

remember to change path to img files, because now it points to your hdd disc, file must be online.

Link to comment
Share on other sites

×
×
  • Create New...