• 0

html help


Question

i really don't know how to go about this.. the code in action can be found here.. the pictures aren't needed for what i'm asking about ^_^ it should still work fine if you just yoinked the code i'm gonna post, for whatever reason, if you choose to help..

i don't know how to make the links (left side images) in the popup display new information in the middle (a new layer? i'm not sure) i got this as a template, but am trying to figure out its implementation, it was easy changing the popup's images.. :happy:

i added the iframe bit, otherwise it just displayed some text in the middle box.. part.. thing.. what can i do? :p

thanks a TON in advance to anyone who at least looks at it!!!

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

intro:

<html>
<head>
<title>. . : : sukamusiru : : . .</title>

<style type="text/css">
a:link, a:active, a:visited {color: #CBAC57; text-decoration: underline}
a:hover {color: #B28816; text-decoration: none}

BODY {
scrollbar-face-color: #000000; 
scrollbar-shadow-color: #CBAC57; 
scrollbar-highlight-color: #CBAC57; 
scrollbar-3dlight-color: #000000; 
scrollbar-darkshadow-color: #000000; 
scrollbar-track-color: #000000; 
scrollbar-arrow-color: #CBAC57; 
overflow: hidden} 
</style>

<script src="chromeless_35.js"></script>
<script language="javascript">
function openIT(u,W,H,X,Y,n,b,x,m,r) {
 var cU  ='images/close_up.gif'
 var cO  ='images/close_ovr.gif'
 var cL  ='images/clock.gif'
 var mU  ='images/min_up.gif'
 var mO  ='images/min_ovr.gif'
 var xU  ='images/max_up.gif'
 var xO  ='images/max_ovr.gif'
 var rU  ='images/res_up.gif'
 var rO  ='images/res_ovr.gif'
 var tH  ='<font face=verdana size=1>  . . : : sukamusiru : : . . </font>'
 var tW  ='  . . : : sukamusiru : : . . '
 var wB  ='#CBAC57'
 var wBs ='#B28816'
 var wBG ='#CBAC57'
 var wBGs='#B28816'
 var wNS ='toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0'
 var fSO ='scrolling=no noresize'
 var brd =b||0;
 var max =x||false;
 var min =m||false;
 var res =r||false;
 var tsz =20;
 return chromeless(u,n,W,H,X,Y,cU,cO,cL,mU,mO,xU,xO,rU,rO,tH,tW,wB,wBs,wBG,wBGs,wNS,fSO,brd,max,min,res,tsz)
}
</script>

</head>

<body bgcolor="#000000" marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">
<center>
<table height="100%" width="100%">
<tr>
<td align="center"><br><br>

<a href="#" onclick="homepage=openIT('home.htm',800,435,null,null,'homepage');">
<img src="images/enter.gif" width="168" height="116" border="0" alt="Enter!"></a>

<br><br><br><br>

</td>
</tr>
</table>
</center>

</body>
</html>

Link to comment
Share on other sites

  • 0

popup (first half):

<html>
<head>
<title>. . : : sukamusiru : : . .</title>

<style type="text/css">
a:link, a:active, a:visited {color: #CBAC57; text-decoration: underline}
a:hover {color: #B28816; text-decoration: none}

BODY {
scrollbar-face-color: #000000; 
scrollbar-shadow-color: #CBAC57; 
scrollbar-highlight-color: #CBAC57; 
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000; 
scrollbar-track-color: #000000; 
scrollbar-arrow-color: #CBAC57;
overflow: hidden}
</style>

<script type="text/javascript" language="javascript">
function on1() 
{if (!document.images) return; document.a.src = "images/butt_link1_sel.jpg";} 
function on2() 
{if (!document.images) return; document.b.src = "images/butt_link2_sel.jpg";}
function on3() 
{if (!document.images) return; document.c.src = "images/butt_link3_sel.jpg";}
function on4() 
{if (!document.images) return; document.d.src = "images/butt_link4_sel.jpg";}
function on5() 
{if (!document.images) return; document.e.src = "images/butt_link5_sel.jpg";}

function off1() 
{if (!document.images) return; document.a.src = "images/butt_link1.jpg";}
function off2() 
{if (!document.images) return; document.b.src = "images/butt_link2.jpg";}
function off3() 
{if (!document.images) return; document.c.src = "images/butt_link3.jpg";}
function off4() 
{if (!document.images) return; document.d.src = "images/butt_link4.jpg";}
function off5() 
{if (!document.images) return; document.e.src = "images/butt_link5.jpg";}

var imgslist = new Array(  
"images/butt_link1_sel.jpg",
"images/butt_link2_sel.jpg", 
"images/butt_link3_sel.jpg", 
"images/butt_link4_sel.jpg", 
"images/butt_link5_sel.jpg"); 

var imgs=new Array(); 
for (x=0; x<imgslist.length; x++) 
 if (document.images) 
  {imgs[x]=new Image(); imgs[x].src = imgslist[x];}  
</script>

</head>

<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" bgcolor="000000">

<table width="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/index_01.jpg" width="175" height="100"></td>
<td><img src="images/index_02.jpg" width="25" height="100"></td>
<td><img src="images/index_03.jpg" width="180" height="100"></td>
<td><img src="images/index_04.jpg" width="220" height="100"></td>
<td><img src="images/index_05.jpg" width="200" height="100"></td>
</tr>

Link to comment
Share on other sites

  • 0

popup (second half):

<tr>
<td><img src="images/index_06.jpg" width="175" height="50"></td>
<td><img src="images/index_07.jpg" width="25" height="50"></td>
<td background="images/bg.jpg"  width="400" height="300" colspan="2" rowspan="13">
<div id="Layer1" style="position:absolute; left:200px; top:100px; width:400px; height:300px; z-index:1; overflow: auto">

<iframe width="100%" height="100%" src="main.htm" frameborder="no" style="position:absolute; z-index:1; overflow:auto"></iframe>

</div>
</td>
<td><img src="images/index_09.jpg" width="200" height="50"></td>
</tr>

<tr>
<td><a href="#" onmouseover="on1();" onmouseout="off1();"><img src="images/butt_link1.jpg" width="175" height="20"
border="0" name="a"></a></td>
<td rowspan="11"><img src="images/index_11.jpg" width="25" height="145"></td>
<td rowspan="11"><img src="images/index_12.jpg" width="200" height="145"></td>
</tr>

<tr>
<td><img src="images/index_13.jpg" width="175" height="5"></td>
</tr>

<tr>
<td><a href="#" onmouseover="on2();" onmouseout="off2();"><img src="images/butt_link2.jpg" width="175" height="20"
border="0" name="b"></a></td>
</tr>

<tr>
<td><img src="images/index_15.jpg" width="175" height="5"></td>
</tr>

<tr>
<td><a href="#" onmouseover="on3();" onmouseout="off3();"><img src="images/butt_link3.jpg" width="175" height="20"
border="0" name="c"></a></td>
</tr>

Link to comment
Share on other sites

  • 0

i was thinking something like this for the iframe code:

<html>
<head>
<title>. . : : sukamusiru : : . .</title>

<style type="text/css">
a:link, a:active, a:visited {color: #CBAC57; text-decoration: underline}
a:hover {color: #B28816; text-decoration: none}

BODY {
scrollbar-face-color: #000000; 
scrollbar-shadow-color: #CBAC57; 
scrollbar-highlight-color: #CBAC57; 
scrollbar-3dlight-color: #000000; 
scrollbar-darkshadow-color: #000000; 
scrollbar-track-color: #000000; 
scrollbar-arrow-color: #CBAC57; 
overflow: hidden} 
</style>

</head>
<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">

<blockquote><font face="arial" size="2" color="#000000"><strong><br>

Welcome!

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</strong></font></blockquote>

</body>
</html>

thanks, you guys (and gals) are the BEST on the web! :D

Link to comment
Share on other sites

  • 0
i don't know how to make the links (left side images) in the popup display new information in the middle (a new layer? i'm not sure)...

Sorry, I only read the above query, not your code. Did you mean something like this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
        <title>Test</title>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
        <script type="text/javascript"><!--
        function SetFocus( strFrameID )
        {
                var Frames = document.getElementById("main").getElementsByTagName("div");
                for( var ii=0; ii<Frames.length; ii++ )
                        Frames[ii].style.visibility = "hidden";

                document.getElementById( strFrameID ).style.visibility = "visible";
        }
        --></script>
        <style type="text/css"><!--
        #main { float: left; }
        #menu {
                border: thin solid red;
                float: left;
                width: 20%;
        }
        .frame {
                border: thin solid green;
                background-color: white;
                position: absolute;
                width: 500px;
        }
        #frame2, #frame3 { visibility: hidden; }
        --></style>
</head>
<body>
<div id="menu">
        <a href="#" onclick="SetFocus('frame1');">View Frame 1</a><br>
        <a href="#" onclick="SetFocus('frame2');">View Frame 2</a><br>
        <a href="#" onclick="SetFocus('frame3');">View Frame 3</a>
</div>
<div id="main">
        <div id="frame1" class="frame"><h1>Frame 1</h1>
        Integer at mauris sed odio pretium vestibulum. Suspendisse lacinia, nisl at laoreet varius, urna enim ornare nibh, at ornare ante elit ac leo. Nam imperdiet, pede at sodales sodales, turpis diam fringilla erat, id pretium turpis lacus vel mi. Fusce suscipit. Fusce molestie purus at urna. Donec nisl dui, faucibus et, semper vitae, pretium sit amet, pede. Vivamus aliquam, diam id congue volutpat, tellus lacus consectetuer lectus, eget interdum wisi purus et erat. Maecenas ullamcorper, urna quis ultrices scelerisque, felis ipsum lobortis dolor, id blandit risus ante et neque. Phasellus accumsan rhoncus ante. Phasellus nec orci. Pellentesque gravida urna quis ipsum. Aliquam dignissim est volutpat enim. Maecenas sed enim eget enim interdum iaculis. Pellentesque vel enim. Duis auctor nunc sed turpis. Nam porttitor ornare ipsum. Praesent ac quam. Nunc volutpat. Proin a mi nec neque sodales malesuada.
        </div>
        <div id="frame2" class="frame"><h1>Frame 2</h1>
        Curabitur blandit. Vestibulum odio enim, dignissim vitae, convallis id, congue ac, orci. Fusce convallis. Phasellus at orci at erat ornare semper. Cras justo velit, lobortis nec, luctus venenatis, porttitor at, neque. Morbi molestie turpis et dolor. Nulla facilisi. Donec justo mauris, adipiscing in, dictum nec, congue et, metus. In ligula lorem, feugiat in, adipiscing at, gravida vitae, nunc. Proin rutrum orci in lorem. Cras tempor varius lectus. Praesent sem. Integer vehicula condimentum lorem. Donec eget metus non metus facilisis bibendum. Sed justo pede, euismod volutpat, aliquet at, laoreet vitae, nunc. In condimentum mauris a leo. Cras neque massa, feugiat et, rhoncus eget, ullamcorper eu, massa. Suspendisse nulla. Maecenas quis ipsum id mauris accumsan placerat. Vestibulum sem.
        </div>
        <div id="frame3" class="frame"><h1>Frame 3</h1>
        Praesent convallis mi eu leo. Vestibulum facilisis tincidunt metus. Ut a nibh. In eu felis ac libero faucibus pellentesque. Donec rhoncus magna sed nunc. Vestibulum eget pede ac wisi lobortis venenatis. Duis tempus dui vitae quam. Suspendisse potenti. Duis euismod. Fusce at risus eu lectus mattis tincidunt. In elementum, dui id viverra condimentum, dolor quam nonummy massa, a blandit eros velit id lectus. Proin et lorem. Donec bibendum justo nec lorem. Mauris aliquet. Quisque quam lacus, dictum sed, placerat quis, pretium id, mi. Phasellus sodales, eros nec pellentesque hendrerit, tortor neque eleifend ante, ut porta libero ante quis lorem. In hac habitasse platea dictumst.
        </div>
</div>
</body>
</html>

Link to comment
Share on other sites

This topic is now closed to further replies.