2 Replies - 1264 Views - Last Post: 22 August 2007 - 06:19 AM

#1 formalsleek  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 25-November 05

Swaping images with javascript

Post icon  Posted 19 August 2007 - 06:28 AM

Hello. Im having a bit of trouble with a very complex script. I will poet all of the code so you can have a better chance of giving me the best answer possible. Basically i am pulling in images from a database using the ID so for instance image1-$id. i have all the images stored in the images folder which have their id at the end. It all works fine except when i try to swap a large image with one of the smaller ones with javascript.

As the javascript is doing this with php its making it far more complicated haha, the code is below. Thanks in advance.

<!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=iso-8859-1" />
<title>Location Cyprus - Rent or Buy!</title>
<link rel="stylesheet" type="text/css" href="style.css" /></head>
<style>
.linkmore {
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #009933;
}
</style>
<?
// we connect to example.com and port 3307
$mysql_user = "***";
$mysql_password = "***";
$mysql_database = "***";
$link = mysql_connect('***', $mysql_user, $mysql_password);
if (!$link) {
	die('Could not connect: ' . mysql_error());
}
$link2 = mysql_select_db($mysql_database);
if (!$link2) {
	die('Could not Select Database ' . mysql_error());
}

if($property==""){

}else{
$query = "SELECT * FROM buysell WHERE ID=$property"; 
$result = mysql_query($query) or die('Query failed: ' . mysql_error());
$row = mysql_fetch_array($result);
?>

<script type="text/javascript">
function loadImg(img){
var imgName = "/images/image1-<? $row['$property']; ?>"; // name of the big image
var srcs = ["/images/image1-"<? $row['$property']; ?>".jpg","/images/image2-"<? $row['$property']; ?>".jpg","/images/image3-"<? $row['$property']; ?>".jpg","/images/image4-"<? $row['$property']; ?>".jpg","/images/image5-"<? $row['$property']; ?>.jpg"]; // array of SRC's for the big images

document.images[imgName].src=srcs[img];
}
</script>
<body>
<?php
}
$query = mysql_query("SELECT * FROM buysell ORDER BY ID"); 
$total_results=mysql_num_rows($query);
$limit = "10"; //limit of archived results per page. 
$total_pages = ceil($total_results / $limit); //total number of pages
 

if (empty($page)) 
	{ 
		$page = "1"; //default page if none is selected 
	} 
$offset = ($page - 1) * $limit; //starting number for displaying results out of DB 
$query = "SELECT * FROM buysell ORDER BY ID DESC LIMIT $offset, $limit"; 
$result = mysql_query($query); 
$count = mysql_numrows($result); 
//This is the start of the normal results... 

?>
<table border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
	<td width="953" height="157"><img src="banner.gif" width="953" height="157" /></td>
  </tr>
  <tr>
	<td background="bg.gif"><table width="100%" border="0" cellpadding="0" cellspacing="0">
	  <tr>
		<td width="17"><img src="left.gif" width="17" height="21" /></td>
		<td background="linksbg.gif"><? include("links.php"); ?></td>
		<td width="23"><img src="right.gif" width="23" height="21" /></td>
	  </tr>
	</table></td>
  </tr>
  <tr>
	<td background="bg.gif"><img src="belowlinks.gif" width="953" height="25" /></td>
  </tr>
  <tr>
	<td background="bg.gif"><table width="100%" border="0" cellpadding="0" cellspacing="0">
	  <tr>
		<td width="20">&nbsp;</td>
		<td><table border="0" align="center" cellpadding="0" cellspacing="0">
		  <tr>
			<td width="600" valign="top">
<?
if($property==""){
?>			
			<p class="style2">Welcome To Location Cyprus</p>
			  <p class="style1">If you&rsquo;re thinking about buying property in Cyprus, you&rsquo;ve come to the right place.  Whether it&rsquo;s a holiday home you&rsquo;re after or you&rsquo;re thinking about immigrating, we provide a comprehensive selection of property for sale in Cyprus, from small apartments, to investment property, to luxury villas.</p>
			  <p class="style1">Beginning with a vast selection of property on offer, we follow through by putting you in touch with the people you need in Cyprus &ndash; property developers, agents, legal support, and banking, guiding you every step of the way to ensure you make the right choice. We deal only with reputable developers and agents, so the properties we advertise are of the highest standard.</p>

<? } else {
?>
<?
$query = "SELECT * FROM buysell WHERE ID=$property"; 
$result = mysql_query($query) or die('Query failed: ' . mysql_error());

$row = mysql_fetch_array($result);

echo '
<table width="100%" border="0" cellspacing="0" cellpadding="5">
  <tr>
	<td rowspan="2"><img height="150" width="200" border="1" border-color="black" name="/images/image1-'.$row['ID'];
		  echo'" src="/images/image1-'.$row['ID'];
		  echo'.jpg"></td>
	<td valign="top" class="style1"><p>Location: '.$row['Location'];
	echo'<br>
	  Description:'.$row['Description'];
	echo'
 </td>
  </tr>
  <tr>
	<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
		<tr>
		  <td><a onmouseover="loadImg(2); return false;" onmouseout="loadImg(1); return false;" target="_blank" href="#">
<img src="/images/image2-'.$row['ID'];
		  echo'.jpg" style="border:2px solid #000000; width: 50px; height: 50px; padding-left:4px; padding-right:4px; padding-top:1px; padding-bottom:1px"></a></td>
		  <td><a onmouseover="loadImg(3); return false;" onmouseout="loadImg(1); return false;" target="_blank" href="#">
<img src="/images/image3-'.$row['ID'];
		  echo'.jpg" style="border:2px solid #000000; width: 50px; height: 50px; padding-left:4px; padding-right:4px; padding-top:1px; padding-bottom:1px"></a></td>
		  <td><a onmouseover="loadImg(4); return false;" onmouseout="loadImg(1); return false;" target="_blank" href="#">
<img src="/images/image4-'.$row['ID'];
		  echo'.jpg" style="border:2px solid #000000; width: 50px; height: 50px; padding-left:4px; padding-right:4px; padding-top:1px; padding-bottom:1px"></a></td>
		  <td><a onmouseover="loadImg(5); return false;" onmouseout="loadImg(1); return false;" target="_blank" href="#">
<img src="/images/image5-'.$row['ID'];
		  echo'.jpg" style="border:2px solid #000000; width: 50px; height: 50px; padding-left:4px; padding-right:4px; padding-top:1px; padding-bottom:1px"></a></td>
		</tr>
	  </table></td>
  </tr>
</table>
';
}
?>
			  </td>
			<td width="30">&nbsp;</td>
			<td width="230" valign="top"><p><span class="style2">Find a Property</span></p>
			  <form id="form1" name="form1" method="post" action="">
				  <table border="0" cellspacing="0" cellpadding="0">
					<tr>
					  <td><span class="style1">
						<select name="select2" class="style1" WIDTH="200" STYLE="width: 200px">
						   <option selected="selected">Price</option>
						   <option>Less then #100,000</option>
						   <option>#100,000 - #200,000</option>
						   <option>#200,000 - #300,000</option>
						   <option>#300,000 - #400,000</option>
						  </select>
					  </span></td>
					</tr>
					<tr>
					  <td height="5"></td>
					</tr>
					<tr>
					  <td><label><span class="style1">
						<select name="select" class="style1" WIDTH="200" STYLE="width: 200px">
							  <option selected="selected">Area</option>
							  <option>Nicosia</option>
							  <option>Pafos</option>
							  <option>Larnaca</option>
							  <option>Famagusta</option>
							  <option>Limasol</option>
						  </select>
					  </span> </label></td>
					</tr>
					<tr>
					  <td height="5"></td>
					</tr>
					<tr>
					  <td><span class="style1">
						<select name="select3" class="style1" WIDTH="200" STYLE="width: 200px">
						  <option selected="selected">Property Type</option>
						  <option>Villa</option>
						  <option>Apartment</option>
						</select>
					  </span></td>
					</tr>
					<tr>
					  <td height="5"></td>
					</tr>
					<tr>
					  <td><span class="style1">
						<select name="select3" class="style1" width="200" style="width: 200px">
						  <option selected="selected">No. of Bedrooms</option>
						  <option>1</option>
						  <option>2</option>
						  <option>3</option>
						  <option>4</option>
						  <option>5</option>
						  <option>6+</option>
						</select>
					  </span></td>
					</tr>
					<tr>
					  <td height="5"></td>
					</tr>
					<tr>
					  <td><div align="right">
						<input type="submit" name="Submit" value="Submit" class="btn" />
					  </div></td>
					</tr>
				  </table>
			  </form>	</td>
		  </tr>
		  <tr>
			<td colspan="3" valign="top">
<?

if ($property=="") { 

echo '<span class="style1"><span class="style2">Properties Between 100,000 - 200,000</span></span><br />';

echo "<center><div class='style1'>";
echo "Showing $total_pages Pages<br><br>"; // total pages
if ($page != 1)
{
echo "<a class='style1' href=$PHP_SELF?page=1><font color=black face=Verdana size=1><< First</font></a>&nbsp;&nbsp;&nbsp;"; // First Page Link
$prevpage = $page - 1;
echo "&nbsp;<a class='style1' href=$PHP_SELF?page=$prevpage><font color=black face=Verdana size=1>Previous Page</font></a>&nbsp;"; // Previous Page Link
}
if ($page == $total_pages) 
{
$to = $total_pages;
} 
elseif ($page == $total_pages-1) 
{
$to = $page+1;
} 
elseif ($page == $total_pages-2) 
{
$to = $page+2;
} 
else 
{
$to = $page+3;
}
if ($page == 1 || $page == 2 || $page == 3) 
{
$from = 1;
} 
else 
{
$from = $page-3;
}

for ($i = $from; $i <= $to; $i++)

{
if ($i == $total_results) $to=$total_results;
if ($i != $page)
{
echo "<a class='style1' href=$PHP_SELF?showold=yes&page=$i><font color=black face=Verdana size=1>$i</font></a>";
}
else
{
echo "<b><font color=black face=Verdana size=1>[$i]</font></b>";
}
if ($i != $total_pages)
echo "&nbsp;";
}
if ($page != $total_pages)
{
$nextpage = $page + 1;
echo "&nbsp;<a href=$PHP_SELF?page=$nextpage><font color=black face=Verdana size=1>Next Page</font></a>&nbsp;"; // Next Page Link
echo "&nbsp;&nbsp;&nbsp;<a class='style1' href=$PHP_SELF?page=$total_pages><font color=black face=Verdana size=1>Last >></font></a>"; // Last Page Link
}
echo "</font></center>";
?>

<br />
<br />

			  <?

$display_columns = 2; 

$countm1 = $count-1; 

$padding = $display_columns-1-($countm1%$display_columns); 

$display_rows = 1+($countm1-$countm1%$display_columns)/$display_columns; 

$all_columns = array(); 

$current_column=-1; 
for($i=0; $i<$count; $i++) 
{ 
	if($i%$display_rows==0) 
		$current_column++; 

	$all_columns[$current_column][]=mysql_result($result,$i,'Description'); 
	$all_columns2[$current_column][]=mysql_result($result,$i,'Price'); 
	$all_columns3[$current_column][]=mysql_result($result,$i,'Photo');  
	$all_columns4[$current_column][]=mysql_result($result,$i,'Bedrooms'); 
	$all_columns5[$current_column][]=mysql_result($result,$i,'Location'); 
	$all_columns6[$current_column][]=mysql_result($result,$i,'Bathrooms'); 
	$all_columns7[$current_column][]=mysql_result($result,$i,'Type');
	$all_columns_id[$current_column][]=mysql_result($result,$i,'ID'); 
} 

echo '<table width="850" class="style1" cellpadding="0" cellspacing="0">'; 
for($i=0; $i<$display_rows-$padding; $i++) 
{	echo '<tr>'; 
	for($j=0; $j<$display_columns; $j++) 
	{	
	echo '<td>';
	
	echo '<table class="style1" width="400" border="0" cellpadding="0" cellspacing="0">
  <tr>
	<td align="justify"><img hspace="5" align="left" src="',$all_columns3[$j][$i],'" height="100" width="150" border="1" border-color="black">';
$property_id = $all_columns_id[$j][$i];
$link = "index.php?property=$property_id";

$text = $all_columns[$j][$i];

$description = substr_replace($all_columns[$j][$i],"...",90);


	echo '<div align="left"><b>Location:</b> ',$all_columns5[$j][$i],'<br>
		  <b>Type:</b> ',$all_columns7[$j][$i],'<br>
		  <b>Bedrooms:</b> ',$all_columns4[$j][$i],'<br>
		  <b>Price:</b> &pound;',$all_columns2[$j][$i],'</div>
		  <b>Description:</b> ',$description,'<br />
<a href="',$link,'"><font color=#DD7761><b>More Details</b></font></a>
</td>
  </tr>
  </table><br /><br />
';
		
	echo '</td>'; 
	} 
	echo '</tr>'; 
} 

// Handle the last $padding rows specially, by ignoring the last column. 
for(/*$i already has the correct value*/; $i<$display_rows; $i++) 
{	echo '<tr>'; 
	for($j=0; $j<$display_columns-1; $j++) 
	{
		echo '<td>';
	
		
	echo '<table class="style1" width="400" border="0" cellpadding="0" cellspacing="0">
  <tr>
	<td align="justify"><img hspace="5" align="left" src="',$all_columns3[$j][$i],'" height="100" width="150" border="1" border-color="black">';
		
	echo '<div align="left"><b>Location:</b> ',$all_columns5[$j][$i],'<br>
		  <b>Type:</b> ',$all_columns7[$j][$i],'<br>
		  <b>Bedrooms:</b> ',$all_columns4[$j][$i],'<br>
		  <b>Price:</b> #',$all_columns2[$j][$i],'</div>
		  <b>Description:</b> ',$all_columns[$j][$i],'</td>
  </tr>
  </table><br /><br />
';
		
	echo '</td>'; 
	} 
	// Empty padding cell. 
	echo '<td></td>'; 
	echo '</tr>'; 
} 
echo '</table>'; 

?>

<?
echo "<center><div class='style1'>";
echo "Showing $total_pages Pages<br><br>"; // total pages
if ($page != 1)
{
echo "<a class='style1' href=$PHP_SELF?page=1><font color=black face=Verdana size=1><< First</font></a>&nbsp;&nbsp;&nbsp;"; // First Page Link
$prevpage = $page - 1;
echo "&nbsp;<a class='style1' href=$PHP_SELF?page=$prevpage><font color=black face=Verdana size=1>Previous Page</font></a>&nbsp;"; // Previous Page Link
}
if ($page == $total_pages) 
{
$to = $total_pages;
} 
elseif ($page == $total_pages-1) 
{
$to = $page+1;
} 
elseif ($page == $total_pages-2) 
{
$to = $page+2;
} 
else 
{
$to = $page+3;
}
if ($page == 1 || $page == 2 || $page == 3) 
{
$from = 1;
} 
else 
{
$from = $page-3;
}

for ($i = $from; $i <= $to; $i++)

{
if ($i == $total_results) $to=$total_results;
if ($i != $page)
{
echo "<a class='style1' href=$PHP_SELF?showold=yes&page=$i><font color=black face=Verdana size=1>$i</font></a>";
}
else
{
echo "<b><font color=black face=Verdana size=1>[$i]</font></b>";
}
if ($i != $total_pages)
echo "&nbsp;";
}
if ($page != $total_pages)
{
$nextpage = $page + 1;
echo "&nbsp;<a href=$PHP_SELF?page=$nextpage><font color=black face=Verdana size=1>Next Page</font></a>&nbsp;"; // Next Page Link
echo "&nbsp;&nbsp;&nbsp;<a class='style1' href=$PHP_SELF?page=$total_pages><font color=black face=Verdana size=1>Last >></font></a>"; // Last Page Link
}
echo "</font></center>";
} else {

}

?>
  </td>
 </tr>
</table>

</td>
		</tr>
		</table></td>
		<td width="20">&nbsp;</td>
  </tr>
  <tr>
	<td><img src="bottom.gif" width="953" height="44" /></td>
  </tr>
</table>
</body>
</html>
<script language="Javascript">
<!--
var SymRealonload;
var SymRealonunload;

function Symonunload()
{
  window.open = SymWinOpen;
  if(SymRealonunload != null)
	 SymRealonunload();
}

function Symonload()
{
  if(SymRealonload != null)
	 SymRealonload();
  window.open = SymRealWinOpen;
  SymRealonunload = window.onunload;
  window.onunload = Symonunload;
}

SymRealonload = window.onload;
window.onload = Symonload;

//-->
</script>



As you can see this is doing a lot. unfortunatly it had to be done this way and so i have to adapt. Any ideas why this is not working? (its only the javascript image that isnt, everything else is working fine.)

Is This A Good Question/Topic? 0
  • +

Replies To: Swaping images with javascript

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4334
  • View blog
  • Posts: 12,128
  • Joined: 18-April 07

Re: Swaping images with javascript

Posted 21 August 2007 - 11:19 PM

The problem with your javascript is that you are attempting to access your images incorrectly. Here are the ways you can access your images...

document.images[2] // array notation
document.images.anything // property notation
document.anything // property notation (a shortcut)



The first one is what you were attempting, but it has to be a number not a path to the file. The index value represents the "i"th image on the page starting from the top. (You could also use getElementById() with the image name to get a reference to the image if you find that easier)

The style that may help your cause more is one of the other two. Give each image a name (like in our example we called the image "anything") and access it through the images collection.

document.getElementById(imgName).src = srcs[img];



In short the problem is how you are referencing your images. You need to get a reference some way and then set the image to the correct path in your array of srcs.

Hope this makes sense (I am a bit tired, so hopefully I am still coherent enough to give a good explanation).

:)
Was This Post Helpful? 0
  • +
  • -

#3 snoj  Icon User is offline

  • Married Life
  • member icon

Reputation: 84
  • View blog
  • Posts: 3,564
  • Joined: 31-March 03

Re: Swaping images with javascript

Posted 22 August 2007 - 06:19 AM

Moved to HTML/CSS/Javascript.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1