0

Hi, If anyone could help it would fantastic.
I got this test to work but it's messy I cobbled it together from hints and tips across the net. Is there a better way to display the description with the image when using 'moviepic'.
I put this online to help: http://www.millermiller.co.uk/daniweb/

Many Thanks, James

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

	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title>Basic Layout</title>
		<style type="text/css" media="all"><!--
body { color: gray; font-size: 12pt; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 13pt; background-color: #e8f0ea; margin: 0; }
#LargeImage { position: absolute; top: 80px; left: 22px; width: 211px; height: 286px; }
#Des_pic1 { color: gray; font-size: 9pt; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 13pt; position: absolute; top: 292px; left: 260px; width: 119px; height: 74px; display:none; }
#Des_pic2 { color: gray; font-size: 9pt; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 13pt; position: absolute; top: 292px; left: 260px; width: 119px; height: 74px; display:none; }
#Des_pic3 { color: gray; font-size: 9pt; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 13pt; position: absolute; top: 292px; left: 260px; width: 119px; height: 74px; display:none; }
#pix1 { width: 211px; height: 263px; }
#thumb1 { position: absolute; top: 80px; left: 520px; width: 75px; height: 75px; }
#thumb2 { position: absolute; top: 170px; left: 520px; width: 75px; height: 75px; }
#thumb3 { position: absolute; top: 260px; left: 520px; width: 75px; height: 75px; }
#img_thumb1 { width: 75px; height: 69px; }
#img_thumb2 { width: 75px; height: 69px; }
#img_thumb3 { width: 75px; height: 69px; }
.ds1 /*agl rulekind: base;*/ { font-weight: bold; }
--></style>

<script type="text/javascript">
//<![CDATA[

function des1(el) {
document.getElementById("Des_pic1").style.display="block";
document.getElementById("Des_pic2").style.display="none";
document.getElementById("Des_pic3").style.display="none";
}

//]]>
</script>
<script type="text/javascript">
//<![CDATA[

function des2(el) {
document.getElementById("Des_pic2").style.display="block";
document.getElementById("Des_pic1").style.display="none";
document.getElementById("Des_pic3").style.display="none";
}

//]]>
</script>
<script type="text/javascript">
//<![CDATA[

function des3(el) {
document.getElementById("Des_pic3").style.display="block";
document.getElementById("Des_pic2").style.display="none";
document.getElementById("Des_pic1").style.display="none";
}

//]]>
</script>
<script language="JavaScript">
<!--
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function movepic(img_name,img_src) {
document[img_name].src=img_src;
}

// End -->
</script>
	</head>

	<body>
		<div id="thumb1"> 
			<img id="img_thumb1" src="DSCF41451.jpg" alt="Thumbnail Top" onmouseover="des1(this) , movepic('pix1','DSCF41451.jpg')" name="img_thumb1" border="0" /></div>
		<div id="thumb2">
			<img id="img_thumb2" src="DSCF41441.jpg" alt="Thumbnail Bottom" onmouseover="des2(this) , movepic('pix1','DSCF41441.jpg')" name="img_thumb2" border="0" /></div>
		<div id="thumb3">
			<img id="img_thumb3" src="DSCF4146.jpg" alt="Thumbnail Bottom" onmouseover="des3(this) , movepic('pix1','DSCF4146.jpg')" name="img_thumb3" border="0" /></div>
		<p></p>
			<div id="Des_pic1"><span class="ds1">Media: </span><br />Oil on Canvas</div>
			<div id="Des_pic2"><span class="ds1">Media: </span><br />Watercolour</div>
			<div id="Des_pic3"><span class="ds1">Media: </span><br />Lithograph</div>
		<div id="LargeImage">
			<img id="pix1" src="DSCN08001.jpg" alt="Large Image" name="pix1" border="0" /></div>
		<p></p>
	</body>

</html>
3
Contributors
4
Replies
5
Views
9 Years
Discussion Span
Last Post by millerandmiller
0

Your javascript is really overkill. You have 3 functions that could be condensed into one. Also, the 3 divs, Des_pic1-3, could be condensed since only one is displayed at a time. All of these things would also help condense the css.

0
<img src='thumb001.jpg' onmouseover='bigimage.src="001.jpg";dsl.innerHtml="watercolor";'>
<img src='thumb002.jpg' onmouseover='bigimage.src="002.jpg";dsl.innerHtml="oil on canvas";'>
<img src='thumb003.jpg' onmouseover='bigimage.src="003.jpg";dsl.innerHtml="lithograph";'>
<div style="your chosen style:location"><img src='blank.jpg' id="bigimage"><span id='dsl'>&nbsp;</span></div></body>
<!--right down the bottom of the page after everything is displayed-->
<script language="javascript" type="text/javascript">
//<![CDATA[
<!-- 
image1 = new Image();
image1.src = "001.jpg";
image2 = new Image();
image2.src = "002.jpg";
image3 = new Image();
image3.src = "003.jpg";
//repeat as necessary for the number of pics you want to have on the page-->
//]]>
</script>
</html>

Dirty unchecked code

will load the page with thumbnails, Fast
then after the page is onscreen will background load the images so they are ready to display on mouseover without delay.
loading on mouseover as written in the original script is not a good idea, just makes the user think the page is broken.

0

Thanks so much for your help, I'm sorry to trouble you but my lack of experience on this has failed to make your code work. Any pointers?

Thanks, James

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.