Works in IE not Firefox

[adino2]

I written a code to create a image viewer using javascript. But the script only works in IE but not in firefox. Please help.

The code is below......

<script type="text/javascript">

function changeImage(filename)
{
mainimage.src = filename;
}

</script>
<center>

<img src="images/bg.jpg" name="mainimage" width="419" height="282">
<marquee width="90%" scrollamount="5" onmouseover="this.stop();" onmouseout="this.start();">

<?php
include 'database_conn.php';
$tbl_name="property";

$sql = "SELECT * FROM $tbl_name WHERE worth='1' && activation='1'";
$query = mysql_query($sql) or die(mysql_error());
echo "<table><tr>";

while ($row =mysql_fetch_array($query))
{
$title = $row['title'];
$area = $row['area'];
$propertyid = $row['propertyid'];
$image1 = $row['image1'];
$contact = $row['contact'];
$price = $row['price'];

if (empty($image1))
{
$image1 = "uploaded_files/no photo.jpg";
?><a href="javascript:changeImage('<?php echo $image1;?>')"><td><center><?php echo "$title";?></center><img src="<?php echo $image1;?>" width='90' height='80'><br><center><a href='detail.php?propertyid=<?php echo "$propertyid'"; ?>'>Details</a></center></td><?php
}
else
{
?><a href="javascript:changeImage('<?php echo $image1;?>')"><td><center><?php echo "$title";?></center><img src="<?php echo $image1;?>" width='90' height='80'><br><center><a href='detail.php?propertyid=<?php echo "$propertyid'"; ?>'>Details</a></center></td><?php
}
}
echo "</tr></table>";
mysql_close($conn);

?></marquee></center>
Reply With Quote

[matthewmaxwell]

I written a code to create a image viewer using javascript. But the script only works in IE but not in firefox. Please help.

The code is below......

<script type="text/javascript">

function changeImage(filename)
{
mainimage.src = filename;
}

</script>
<center>

<img src="images/bg.jpg" name="mainimage" width="419" height="282">
<marquee width="90%" scrollamount="5" onmouseover="this.stop();" onmouseout="this.start();">

You just need to change your function to:

function changeImage(filename)
{
document.getElementById("mainimage").src=filename;
}

[Troy III]

I written a code to create a image viewer using javascript. But the script only works in IE but not in firefox. Please help.

The code is below......

<script type="text/javascript">

function changeImage(filename)
{
mainimage.src = filename;
}

</script>
<center>

<img src="images/bg.jpg" name="mainimage" width="419" height="282">
<marquee width="90%" scrollamount="5" onmouseover="this.stop();" onmouseout="this.start();">

<?php
include 'database_conn.php';
$tbl_name="property";

$sql = "SELECT * FROM $tbl_name WHERE worth='1' && activation='1'";
$query = mysql_query($sql) or die(mysql_error());
echo "<table><tr>";

while ($row =mysql_fetch_array($query))
{
$title = $row['title'];
$area = $row['area'];
$propertyid = $row['propertyid'];
$image1 = $row['image1'];
$contact = $row['contact'];
$price = $row['price'];

if (empty($image1))
{
$image1 = "uploaded_files/no photo.jpg";
?><a href="javascript:changeImage('<?php echo $image1;?>')"><td><center><?php echo "$title";?></center><img src="<?php echo $image1;?>" width='90' height='80'><br><center><a href='detail.php?propertyid=<?php echo "$propertyid'"; ?>'>Details</a></center></td><?php
}
else
{
?><a href="javascript:changeImage('<?php echo $image1;?>')"><td><center><?php echo "$title";?></center><img src="<?php echo $image1;?>" width='90' height='80'><br><center><a href='detail.php?propertyid=<?php echo "$propertyid'"; ?>'>Details</a></center></td><?php
}
}
echo "</tr></table>";
mysql_close($conn);

?></marquee></center>
Reply With Quote

Netscape UA children are not capable of recognizing DOM elements by their Names or IDs natively!
They'll need externally patched built-in functions attached to Document Object, to become aware of them and be able to reach them. But not without script action. They could trigger this function internally after onload event would fire, but that would impact their render engine, rise more memory issues present and would fail to update DOM changes on runtime because of internal ondomchange event imperfections that would occasionally rise errors like this or that element is "Undefined" even though present.and defined.

Therefore you will be needing a function call "document.getelementById() every time you have to reference some object to manipulate its properties. It's good to keep this in mind an not forget make that call whenever you are referencing to your aimed elements.

[adino2]

I tried using

function changeImage(filename)
{
document.getElementById("mainimage").src=filename;
}

It's not working in both IE and firefox

[Troy III]

I tried using

function changeImage(filename)
{
document.getElementById("mainimage").src=filename;
}

It's not working in both IE and firefox

:')
"

DaniWeb Community > Web Development > JavaScript / DHTML / AJAX
JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS
Works in IE not Firefox

:'p

[adino2]

Based on IE it says that Object doesn't support this method or property

[almostbob]

<img src="images/bg.jpg" name="mainimage" width="419" height="282"> Should be

<img src="images/bg.jpg" id="mainimage" width="419" height="282">

and as previously written by mathewmaxwell

function changeImage(filename)
{
document.getElementById("mainimage").src=filename;
}

<element name= . is not formally deprecated, it just does not work

[adino2]

Aha, Thanks currently it works in IE again but still facing abit of problem in the Firefox , i'm guessing that there is some errors due to this part of codes.

<a href="javascript:changeImage('<?php echo $image1;?>')"><td><center><?php echo "$title";?></center><img src="<?php echo $image1;?>" width='90' height='80'><br><center>

[adino2]

I made a few changes

?><td><center><a href="javascript:changeImage('<?php echo $image1;?>')"><?php echo "$title";?><br><img src="<?php echo $image1;?>" width='90' height='80'><br><a href='detail.php?propertyid=<?php echo "$propertyid'"; ?>'>Details</a></center></td><?php

And finally it works

But mainly all thanks to the document.getElementById.

SOLVED

[almostbob]

extra suggestion is to get a code highlighting editor like notepad++ notepad2, or if the IDE you are using supports code highlighting turn it on
wrong code, missing quotes, too many quotes, unclosed pairs, out of sequence pairs will be highlighted
line 34 <a><td></a></td> shows as left in my editor will break

edit didn need the code to post too?

[matthewmaxwell]

<img src="images/bg.jpg" name="mainimage" width="419" height="282"> Should be

<img src="images/bg.jpg" id="mainimage" width="419" height="282">

and as previously written by mathewmaxwell

function changeImage(filename)
{
document.getElementById("mainimage").src=filename;
}

<element name= . is not formally deprecated, it just does not work

You know...I completely missed the fact that he had name and not id :P I blame it on me not being a morning person :D