PDA

View Full Version : Is this possible with JS



jbert
08-07-2008, 05:33 PM
I have 2 rows of thumbnail images. When hovered a larger image is displayed. This is all done with css and PHP. I also want a text area next to the image atthe same time the larger image displays. Is this possible with JS?


Thanks


Jbert

Jesdisciple
08-07-2008, 05:44 PM
Yes, but where should the textarea be in relation to the larger image? If it's consistent, you might be able to still avoid JS.

Can we see your source, or its URL if it's online?

jbert
08-08-2008, 12:47 AM
site address is

http://jbert.phpnet.us/gallery/

Text area would display on the right of the image. When done all images will be the larger ones.


Thanks chris

Jesdisciple
08-08-2008, 02:01 AM
Do you, by any chance, understand that CSS? I can't figure out what container is holding the big image. CSS has never been my strong point. EDIT: Never mind; I got it. I'll post back when I've figured the rest out.

BTW, a very small bug shows up when you click on a small image and mouse over a big one. And the <!-- included to help the ancient browsers by hiding the CSS is never terminated by a --> (at the end of the stylesheet), so the ancient browsers won't see the page.

Jesdisciple
08-08-2008, 04:40 AM
I got it, except now the active/focus thing only works for the textarea (not the picture). Make sure to backup your current version in case you prefer it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CHEERS pics</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
body {
background-color:#fff;
}
ul, li {
padding:0;
list-style:none;
}
ul {
position:relative;
width:745px;
margin:auto;

border:1px solid #ccc;
height:525px;
padding-left:5px;
}
li {
margin:5px 0;
float:left;
width:82px;
height:54px;
background-position:center center;
background-repeat:no-repeat;
}
#pic1 {
background-image:url(thumbs72/1.jpg);
}
#pic2 {
background-image:url(thumbs72/10.jpg);
}
#pic3 {
background-image:url(thumbs72/11.jpg);
}
#pic4 {
background-image:url(thumbs72/12.jpg);
}
#pic5 {
background-image:url(thumbs72/13.jpg);
}
#pic6 {
background-image:url(thumbs72/14.jpg);
}
#pic7 {
background-image:url(thumbs72/15.jpg);
}
#pic8 {
background-image:url(thumbs72/16.jpg);
}
#pic9 {
background-image:url(thumbs72/17.jpg);
}
#pic10 {
margin-top:400px;
background-image:url(thumbs72/18.jpg);
}
#pic11 {
margin-top:400px;
background-image:url(thumbs72/2.jpg);
}
#pic12 {
margin-top:400px;
background-image:url(thumbs72/3.jpg);
}
#pic13 {
margin-top:400px;
background-image:url(thumbs72/4.jpg);
}
#pic14 {
margin-top:400px;
background-image:url(thumbs72/5.jpg);
}
#pic15 {
margin-top:400px;
background-image:url(thumbs72/6.jpg);
}
#pic16 {
margin-top:400px;
background-image:url(thumbs72/7.jpg);
}
#pic17 {
margin-top:400px;
background-image:url(thumbs72/8.jpg);
}
#pic18 {
margin-top:400px;
background-image:url(thumbs72/9.jpg);
}
a {
display:block;
height:54px;
}
a img {
position:absolute;
top:70px;
left:50px;
width:500px;
display:none;
border:0;
}
a textarea {
position:absolute;
top:70px;
left:550px;
width:180px;
height:368px;
display:none;
}
* html a:hover {
display:block;
height:53px;
}
a:hover img, a:hover textarea {
display:inline;
}
a:active img, a:active textarea
a:focus img, a:focus textarea {
z-index:1;
display:inline;
}
-->
</style>
</head>
<body>






<ul>

<li id="pic1"><a href="#n"><img src="thumbs500/1.jpg" alt="pic1" /><textarea></textarea></a></li>
<li id="pic2"><a href="#n"><img src="thumbs500/10.jpg" alt="pic2" /><textarea></textarea></a></li>
<li id="pic3"><a href="#n"><img src="thumbs500/11.jpg" alt="pic3" /><textarea></textarea></a></li>
<li id="pic4"><a href="#n"><img src="thumbs500/12.jpg" alt="pic4" /><textarea></textarea></a></li>
<li id="pic5"><a href="#n"><img src="thumbs500/13.jpg" alt="pic5" /><textarea></textarea></a></li>
<li id="pic6"><a href="#n"><img src="thumbs500/14.jpg" alt="pic6" /><textarea></textarea></a></li>

<li id="pic7"><a href="#n"><img src="thumbs500/15.jpg" alt="pic7" /><textarea></textarea></a></li>
<li id="pic8"><a href="#n"><img src="thumbs500/16.jpg" alt="pic8" /><textarea></textarea></a></li>
<li id="pic9"><a href="#n"><img src="thumbs500/17.jpg" alt="pic9" /><textarea></textarea></a></li>
<li id="pic10"><a href="#n"><img src="thumbs500/18.jpg" alt="pic10" /><textarea></textarea></a></li>
<li id="pic11"><a href="#n"><img src="thumbs500/2.jpg" alt="pic11" /><textarea></textarea></a></li>
<li id="pic12"><a href="#n"><img src="thumbs500/3.jpg" alt="pic12" /><textarea></textarea></a></li>
<li id="pic13"><a href="#n"><img src="thumbs500/4.jpg" alt="pic13" /><textarea></textarea></a></li>
<li id="pic14"><a href="#n"><img src="thumbs500/5.jpg" alt="pic14" /><textarea></textarea></a></li>
<li id="pic15"><a href="#n"><img src="thumbs500/6.jpg" alt="pic15" /><textarea></textarea></a></li>
<li id="pic16"><a href="#n"><img src="thumbs500/7.jpg" alt="pic16" /><textarea></textarea></a></li>

<li id="pic17"><a href="#n"><img src="thumbs500/8.jpg" alt="pic17" /><textarea></textarea></a></li>
<li id="pic18"><a href="#n"><img src="thumbs500/9.jpg" alt="pic18" /><textarea></textarea></a></li>
</ul>




</body>
</noscript>
<div style="text-align: center;"><div style="position:relative; top:0; margin-right:auto;margin-left:auto; z-index:99999">

<div id="" style="text-align: center";><div style="position:relative; top:0; width: 100%; height: 100%; margin-right:auto;margin-left:auto; z-index:99999">
<IFRAME FRAMEBORDER=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=NO WIDTH=300 HEIGHT=250 SRC="http://adserving.cpxinteractive.com/st?ad_type=iframe&ad_size=300x250&section=334085"></IFRAME> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> var pageTracker = _gat._getTracker("UA-137899-7"); pageTracker._initData(); pageTracker._trackPageview(); </script><SCRIPT TYPE="text/javascript/" SRC="http://adserving.cpxinteractive.com/st?ad_type=pop&ad_size=0x0&entity=39642&site_code=Byet_Pop&section_code=Byet_Pop&banned_pop_types=28&pop_times=3&pop_frequency=3600"></SCRIPT></div></div>

</div></div>
</html>