PDA

View Full Version : Can you make a link change the contents of a particular div?

WinterInChicago
09-05-2008, 08:31 PM
If I have a div that contains 6 images and each is a link, can I code those images to change the contents of another div .... similar to the properties of frames (ewww.. frames...).. so I dont have to save 6 different html files, each with a different image in that div.

There is something else I am having a problem with as well... i am going to want to have 4 columns of images that work as links. On the page you see 2 columns so far. The duped image is not an issue, I did that on purpose to test where it would go. The issue is the spacing. I tried adding padding and or margins to either column and everytime I did that, it moved the image on the right to the bottom of the first column.... why.?

http://matthewtyndall.com/supertest.html is the site.

HTML for site:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dismantle Design || Graphic Design by Matthew Tyndall</title>
<meta http-equiv="Content-Language" content="en-us" />

<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />

<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />

<meta name="author" content="Matthew Tyndall Dismantle Design" />

<style type="text/css" media="all">@import "css/master.css";body {
background-image: url(Images/ddimages/navbkg.jpg);
background-repeat: repeat-x;
}
</style>
<script type="text/JavaScript">
<!--
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('Images/ddimages/home2.jpg','Images/ddimages/design2.jpg','Images/ddimages/web2.jpg','Images/ddimages/photography2.jpg')">



<div id="nav-container">
<img src="Images/ddimages/dismantlelogo.jpg" alt=""/><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','Images/ddimages/home2.jpg',1)"><img src="Images/ddimages/home.jpg" name="Image2" width="92" height="52" border="0" id="Image2" alt=""/></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','Images/ddimages/design2.jpg',1)"><img src="Images/ddimages/design.jpg" name="Image3" width="108" height="52" border="0" id="Image3" alt=""/></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','Images/ddimages/web2.jpg',1)"><img src="Images/ddimages/web.jpg" name="Image4" width="80" height="52" border="0" id="Image4" alt=""/></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','Images/ddimages/photography2.jpg',1)"><img src="Images/ddimages/photography.jpg" name="Image5" width="140" height="52" border="0" id="Image5" alt=""/></a></div>

<div id="page-container">

<div id="one"><img src="Images/ddimages/design/1.jpg" alt=""/><br /><img src="Images/ddimages/design/2.jpg" alt="" /><br /><img src="Images/ddimages/design/3.jpg" alt="" /><br /><img src="Images/ddimages/design/4.jpg" alt="" /><br /><img src="Images/ddimages/design/5.jpg" alt="" /><br /><img src="Images/ddimages/design/6.jpg" alt="" />

</div>
<div id="two"><img src="Images/ddimages/design/1.jpg" alt="" />
</div>

</div>



</body>
</html>



CSS MASTER FILE:

html, body {
margin: 0;
}
#page-container {
width: 200px;
height: 200px;
margin-top: 50px;
margin-left:28px;
background: red;
}
#one {
float: left;
width: 98px;
height: 645px;
background: white;
}
#two {
width:98px;
height: 645px;
float: left;
}
#three {
float: right;
width: 541px;
}
#four {
width:195px;
height:42px;
float:right;
}
#display {
width: 195px;
height:200px;
float: right;
}
rangana
09-06-2008, 12:06 AM
Yes, you can. Say for example you have this markup:

<div id="one">
<img src="http://matthewtyndall.com/Images/ddimages/design/1.jpg" alt=""/><br /><img src="http://matthewtyndall.com/Images/ddimages/design/2.jpg" alt="" /><br /><img src="http://matthewtyndall.com/Images/ddimages/design/3.jpg" alt="" /><br /><img src="http://matthewtyndall.com/Images/ddimages/design/4.jpg" alt="" /><br /><img src="http://matthewtyndall.com/Images/ddimages/design/5.jpg" alt="" /><br /><img src="http://matthewtyndall.com/Images/ddimages/design/6.jpg" alt="" />
</div>


Add an attribute, to distinguish which div you want to show, class will do:

<div id="one">
<img src="http://matthewtyndall.com/Images/ddimages/design/1.jpg" alt="" class="div1"/><br /><img src="http://matthewtyndall.com/Images/ddimages/design/2.jpg" alt="" class="div2"/><br /><img src="http://matthewtyndall.com/Images/ddimages/design/3.jpg" alt="" class="div3"/><br /><img src="http://matthewtyndall.com/Images/ddimages/design/4.jpg" alt="" class="div4"/><br /><img src="http://matthewtyndall.com/Images/ddimages/design/5.jpg" alt="" class="div5"/><br /><img src="http://matthewtyndall.com/Images/ddimages/design/6.jpg" alt="" class="div6"/>
</div>


Ensure, you have those pointed divs in your markup:

<div id="Dcontent">
<div id="div1">
Content for Div1
</div>
<div id="div2">
Content for Div2
</div>
<div id="div3">
Content for Div3
</div>
<div id="div4">
Content for Div4
</div>
<div id="div5">
Content for Div5
</div>
<div id="div6">
Content for Div6
</div>
</div>


If so, then this script will do the play:

function init(){
resetDivs();
for(var i=0,img=document.getElementById('one').getElementsByTagName('img');i<img.length;i++){img[i].onclick=function(){
resetDivs();document.getElementById(this.className).style.display='';}}}
function resetDivs()
{for(var i=0,divs=document.getElementById('Dcontent').getElementsByTagName('div');i<divs.length;i++){divs[i].style.display='none';}}


...and don't forget to call the function on load:

<body onload="MM_preloadImages('Images/ddimages/home2.jpg','Images/ddimages/design2.jpg','Images/ddimages/web2.jpg','Images/ddimages/photography2.jpg');init();">


Hope it helps.
WinterInChicago
09-10-2008, 07:16 PM
I dont really understand. How would you go about it automatically in dreamweaver 8? I have been playing with the behaviors to do the swap image on click but cant remember how to do it.
rangana
09-10-2008, 07:57 PM
Which part was it that you did'nt understand?

The steps I made was detailed as possible to what you have.
WinterInChicago
09-10-2008, 08:12 PM
I am really not sure about any of it. I am new to css. I just want to go the behaviors of each thumbnail and make it to where when I click the thumbnail the large image on the right changes. I want it to load the jpeg in that window until I click another thumb. www.matthewtyndall.com/supertest.html
rangana
09-10-2008, 09:49 PM
Add this script in the head section of your page:

<script type="text/javascript">
function init(){
for(var i=0,img=document.getElementById('one').getElementsByTagName('img');i<img.length;i++){
img[i].onclick=function(){
document.getElementById('two').innerHTML='<img class="window" src="'+this.src+'">';}}}
</script>


Add the function to the onload attribute:

<body onload="MM_preloadImages('Images/ddimages/home2.jpg','Images/ddimages/design2.jpg','Images/ddimages/web2.jpg','Images/ddimages/photography2.jpg');init();">



See if it helps.
WinterInChicago
09-10-2008, 11:30 PM
Nevermind. After messing with Dreamweaver, I solved my issue. Thanks for the effort though.