I have a page that loads a text box and an image the user has selected from another page. I can get them to display but I need to be able to have the image fit under the text. Right now the image is over the text. I have a sample page to look at: http://www.lovingmemoriesofmemphis.com/otest.htm
I have tried using various JavaScript examples of moving a <div> but I cannot get it to work. Can someone please help me with this? I have been trying to get this to work for over a week now. The text and images will be different widths and heights depending on what the user has selected in a previous page (31 texts and 25 images).
Here is the code from my test page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Loving Memories</title>
<script type="text/javascript" src="Javascripts/do_cookie.js"> </script>
<script type="text/javascript" src="Javascripts/verses.js"> </script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script language ="javascript">
<!–
function MoveDiv()
{
var div1 = document.getElementById("img1");
var div2 = document.getElementById("img2");
div2.style.top = parseInt(div2.style.top, 10) + 100 + "px";
div2.style.left = parseInt(div2.style.left, 10) + 100 + "px";
}
//–>
</script>
<script type="text/javascript">
<!–
function getImage(pExistingImageID, pImageURL){
var img = document.createElement(’img’);
img.onload = function (evt) {
document.getElementById(pExistingImageID).src=this.src;
document.getElementById(pExistingImageID).width=this.width * 0.48;
document.getElementById(pExistingImageID).height=this.height * 0.48;
var v_top = this.height * 0.48;
document.getElementById(img2).style.top = v_top + ‘px’;
}
img.src = pImageURL;
return false;
}
//–> http://www.expertsrt.com/articles/Rod/imageAjaxNot.php
</script>
</head>
<body>
<p></p>
<div id="img1">
<script language="JavaScript" type="text/javascript">
<!– hide from old browsers
var sc = readCookie(’Verse_url’);
sc = verse_1(); //for testing only. will be removed from working version.
sc = sc + "()";
eval(sc);
//–>
</script>
</div>
<br>
<div id="img2">
<img id="theImgL" border="0" src="backgrounds/spacer.jpg">
<script language="JavaScript" type="text/javascript">
<!– hide from old browsers
sc = readCookie(’Scene_url’);
sc="prayerhands"; //for testing only. will be removed when working correctly.
sr = "../backgrounds/" + sc + ".jpg";
getImage(’theImgL’, sr);
//–>
</script>
</div>
<input type="button" value="Move Div" onclick="MoveDiv()" />
</body>
</html>
Loading ...