Member Avatar for millerandmiller

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
  • 126 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by millerandmiller
Member Avatar for buddylee17

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.

Member Avatar for millerandmiller

Hi Buddylee, thanks for the reply. I am struggling trying to do that.
James

Member Avatar for almostbob 
<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.

Member Avatar for millerandmiller

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.