Easy w Frames tough w CSS

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 361,919 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,540 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 435 | Replies: 1

•

Join Date: Mar 2008

Posts: 1

Reputation: DWSandyS is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

DWSandyS

Offline

Newbie Poster

Easy w Frames tough w CSS

Mar 24th, 2008

I am new to Dreamweaver, and stumped. Though I can do it easily with frames I cant get CSS to allow user to click on one of several thumbnails in a left column and show larger image of the clicked thumb in the main area of the SAME page. Is it possible? Thanks for helping.

•

Join Date: Mar 2007

Location: georgia

Posts: 55

Reputation: hunkychop is an unknown quantity at this point

Rep Power: 2

Solved Threads: 4

hunkychop

Offline

Junior Poster in Training

Re: Easy w Frames tough w CSS

Mar 24th, 2008

here is how to do it in javascript:

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<!-- your image -->
<img src="YOUR_THUM_IMAGE_PATH" onclick="javascript:fillDiv('YOUR_BIG_IMAGE_PATH','div1');" />
	<div id="div1" style="width:100; border:thick; display:inline;">click the image to make new image appear here</div>
 
<script type="text/javascript">
function fillDiv(imgurl, div){
	document.getElementById(div).innerHTML="<img src='"+imgurl+"' />";
}
</script>
<!-- your image -->
<img src="YOUR_THUM_IMAGE_PATH" onclick="javascript<b></b>:fillDiv('YOUR_BIG_IMAGE_PATH','div1');" />
	<div id="div1" style="width:100; border:thick; display:inline;">click the image to make new image appear here</div>

<script type="text/javascript">
function fillDiv(imgurl, div){
	document.getElementById(div).innerHTML="<img src='"+imgurl+"' />";
}
</script>