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  (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.

Code:

<!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>

Thread: Is this possible with JS

Thread Tools

Search Thread

Is this possible with JS

Bookmarks

Bookmarks

Posting Permissions