TP-Docs
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

User

Welcome to TinyPortal. Please login or sign up.

Stats

Members
  • Total Members: 3,963
  • Latest: BiZaJe
Stats
  • Total Posts: 195,917
  • Total Topics: 21,308
  • Online today: 790
  • Online ever: 8,223 (February 19, 2025, 04:35:35 AM)
Users Online
  • Users: 1
  • Guests: 638
  • Total: 639
  • tino

scripts, layers and rollovers

Started by forummaker, January 21, 2009, 02:31:26 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Print
Go Down Pages1
User actions

forummaker

January 21, 2009, 02:31:26 AM Last Edit: January 21, 2009, 02:33:49 AM by forummaker
I did do a search for this, but probably not searching the right terms.
Here's what I did. (i've provided an image to help)
Using Dreamweaver. Added a large image to page. Added layers. Added rollover image to layer. Placed layer/rollover image where I wanted it to be shown on the large image. Copied the html code <script......>. Created a script block in tp. The images rollover, but you can see that they are not on the main image. Here's what I have.
Thanks for any help with this.
smf 1.1.7
tp 1.0.5

JPDeni

#1
January 21, 2009, 05:02:01 AM
Dreamweaver is probably not the best thing to use and I'm not sure what it is that you want to do.

If you need us to help with code, we need you to post the code. Use the code tags (The # button on the reply screen.)

forummaker

#2
January 21, 2009, 10:51:28 AM
Thanks for the response.
Here's the entire code from Dreamweaver. I only used part of it, I know that I don't use the entire code in a script box. I guess I'm not sure which part of this code should be added to a script block for it to work.

Code Select
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

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>

<body onLoad="MM_preloadImages('rsg2.png','psg2.png','tv2.png','tp2.png','pg2.png','cf12.png','mg2.png','mm2.png')">
<p><img src="/files/court/blankcourt.png" width="900" height="454"></p>
<div id="Layer1" style="position:absolute; width:268px; height:82px; z-index:1; left: 61px; top: 65px;"><a href="/forums/index.php?page=28" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('rsg','','rsg2.png',1)"><img src="/files/court/rsg1.png" alt="Read the Strategy Guide" name="rsg" width="246" height="80" border="0"></a></div>
<div id="Layer2" style="position:absolute; width:269px; height:72px; z-index:2; left: 62px; top: 157px;"><a href="/forums/index.php?page=13" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('psg','','psg2.png',1)"><img src="/files/court/psg1.png" alt="Print the Strategy Guide" name="psg" width="244" height="78" border="0"></a></div>
<div id="Layer3" style="position:absolute; width:269px; height:72px; z-index:3; left: 62px; top: 248px;"><a href="/forums/index.php?action=mgallery;sa=album;id=11" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('tv','','tv2.png',1)"><img src="/files/court/tv1.png" alt="Training Videos" name="tv" width="202" height="80" border="0"></a></div>
<div id="Layer4" style="position:absolute; width:268px; height:70px; z-index:4; left: 63px; top: 338px;"><a href="/forums/index.php?action=mgallery;sa=album;id=12" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('tp','','tp2.png',1)"><img src="/files/court/tp1.png" alt="Training Photos" name="tp" width="202" height="80" border="0"></a></div>
<div id="Layer5" style="position:absolute; width:180px; height:84px; z-index:5; left: 650px; top: 66px;"><a href="/forums/index.php?page=15" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('pg','','pg2.png',1)"><img src="/files/court/pg1.png" alt="Pickleball Gear" name="pg" width="200" height="78" border="0"></a></div>
<div id="Layer6" style="position:absolute; width:206px; height:78px; z-index:6; left: 645px; top: 156px;"><a href="/forums/index.php?action=forum" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('cf','','cf12.png',1)"><img src="/files/court/cf1.png" alt="Community Forums" name="cf" width="205" height="78" border="0"></a></div>
<div id="Layer7" style="position:absolute; width:200px; height:74px; z-index:7; left: 651px; top: 249px;"><a href="/forums/index.php?action=mgallery;sa=album;id=1" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('mg','','mg2.png',1)"><img src="/files/court/mg1.png" alt="Members Gallery" name="mg" width="200" height="78" border="0"></a></div>
<div id="Layer8" style="position:absolute; width:200px; height:79px; z-index:8; left: 650px; top: 336px;"><a href="/forums/index.php?action=googlemap" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('mm','','mm2.png',1)"><img src="/files/court/mm1.png" alt="Members Map" name="mm" width="200" height="78" border="0"></a></div>
</body>
</html>

JPDeni

#3
January 21, 2009, 01:34:08 PM
You can try this:

Code Select

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

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>

<p><img src="/files/court/blankcourt.png" width="900" height="454"></p>
<div id="Layer1" style="position:absolute; width:268px; height:82px; z-index:1; left: 61px; top: 65px;"><a href="/forums/index.php?page=28" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('rsg','','rsg2.png',1)"><img src="/files/court/rsg1.png" alt="Read the Strategy Guide" name="rsg" width="246" height="80" border="0"></a></div>
<div id="Layer2" style="position:absolute; width:269px; height:72px; z-index:2; left: 62px; top: 157px;"><a href="/forums/index.php?page=13" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('psg','','psg2.png',1)"><img src="/files/court/psg1.png" alt="Print the Strategy Guide" name="psg" width="244" height="78" border="0"></a></div>
<div id="Layer3" style="position:absolute; width:269px; height:72px; z-index:3; left: 62px; top: 248px;"><a href="/forums/index.php?action=mgallery;sa=album;id=11" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('tv','','tv2.png',1)"><img src="/files/court/tv1.png" alt="Training Videos" name="tv" width="202" height="80" border="0"></a></div>
<div id="Layer4" style="position:absolute; width:268px; height:70px; z-index:4; left: 63px; top: 338px;"><a href="/forums/index.php?action=mgallery;sa=album;id=12" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('tp','','tp2.png',1)"><img src="/files/court/tp1.png" alt="Training Photos" name="tp" width="202" height="80" border="0"></a></div>
<div id="Layer5" style="position:absolute; width:180px; height:84px; z-index:5; left: 650px; top: 66px;"><a href="/forums/index.php?page=15" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('pg','','pg2.png',1)"><img src="/files/court/pg1.png" alt="Pickleball Gear" name="pg" width="200" height="78" border="0"></a></div>
<div id="Layer6" style="position:absolute; width:206px; height:78px; z-index:6; left: 645px; top: 156px;"><a href="/forums/index.php?action=forum" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('cf','','cf12.png',1)"><img src="/files/court/cf1.png" alt="Community Forums" name="cf" width="205" height="78" border="0"></a></div>
<div id="Layer7" style="position:absolute; width:200px; height:74px; z-index:7; left: 651px; top: 249px;"><a href="/forums/index.php?action=mgallery;sa=album;id=1" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('mg','','mg2.png',1)"><img src="/files/court/mg1.png" alt="Members Gallery" name="mg" width="200" height="78" border="0"></a></div>
<div id="Layer8" style="position:absolute; width:200px; height:79px; z-index:8; left: 650px; top: 336px;"><a href="/forums/index.php?action=googlemap" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('mm','','mm2.png',1)"><img src="/files/court/mm1.png" alt="Members Map" name="mm" width="200" height="78" border="0"></a></div>


But I wouldn't try using Dreamweaver for anything to do with TP.

I'm not much on javascript stuff, but I don't think you're going to get your images preloaded. I took out the body tag because it shouldn't be there, but that's where the preloading of images is. I don't think they'll preload even if you have that tag in, though, because there has already been a body tag processed via TP and I don't think that html processes it a second time.

I could be mistaken, though, and if I am, I hope someone who knows this stuff better than I do will join in.

JPDeni

#4
January 21, 2009, 02:49:19 PM
Further thinking about this....

You probably would do better to create a theme -- since you didn't mention a theme, I can only assume that you're using the default -- and put the javascript in the index.template.php file, rather than in a block.
Print
Go Up Pages1
User actions

This website is proudly hosted on Crocweb Cloud Website Hosting.