PDA

View Full Version : Picture won't appear in IE



Partizan
Jul 11th, 2010, 01:45 PM
Hi all,

I have spent a day trying to find what I did wrong when changing the layout on my site's mainpage.

I have a script working on my site that allows the user to click "Next Picture" to view another picture. I have this working on all browsers on this page for example (http://www.minifigtimes.com/news/2009/2009-10-20-story02.shtml). I wanted to use the script on the mainpage somewhat differently - have the picture on the left of the screen and no captions associated with it. This copy of my mainpage (http://www.minifigtimes.com/index-ie.shtml) shows it working as I wanted it to but only in FF and Chrome (not in IE or at least IE8).

It is very frustrating as it should be possible to work in IE8 as the script is working fine the first page above. So I must have messed up something somewhere.


This is the code of the script working correctly (note it has captions associated with each image which I don't want on the frontpage - one of the changes I made)


HEAD


<script type="text/javascript">
<!--
var img = new Array();
var caption = new Array();
var path = "http://www.minifigtimes.com/"


img[0] = path + "news/2009/images/2009-10-20-p3.png"
caption[0] = "The CCTV images of the raid clearly shown a hairy minifig demanding cash be put in his suitcase whilst fearful customers watched on. No minifigs were hurt in the robbery. ";

img[1] = path + "news/2009/images/2009-10-20-p4.png";
caption[1] = "Empire Police chief Biggus Piggus reckoned that the robber's hair was not real. \"No minifig with any ounce of self-respect would have a hairstyle like that\", he told reporters";


// Add more images here
function changeIMG(direction) {

var current=document.images.nextpic.src;

for (var i = 0;i<img.length;i++) {
if(img[i]==current) {
if(direction=="forward") {
if(i==img.length-1) {
swap(0);
}
else {
swap(i+1);
}
}
if(direction=="back") {
if(i==0) {
swap(img.length-1);
}
else {
swap(i-1);
}
}
break;
}
}
}

function swap(nr) {
document.images.nextpic.src=img[nr];
document.getElementById("imgcaption").innerHTML=caption[nr];
}

//-->
</script>




BODY


<h4 class="story-headline-news">Armed and dangerous minifig sought after Post office robbery</h4>

<div class="img right" style="border: 0px solid black; padding: 20px; float: right; width: 250px; max-width: 250px;">
<img name="nextpic" src="http://www.minifigtimes.com/news/2009/images/2009-10-20-p3.png" onclick="changeIMG();" alt="news">
<a href="#" onclick="changeIMG('forward');return false;" class="link-next-picture">Next Picture</a>

<p id="imgcaption" style="width: 100%;">
The CCTV images of the raid clearly shown a hairy minifig demanding cash be put in his suitcase whilst fearful customers watched on. No minifigs were hurt in the robbery.

</p>




This is the code of the script not working on my IE8 (works as I wanted on FF and Chrome)

HEAD


<script type="text/javascript">
<!--
var img = new Array();
var path = "http://www.minifigtimes.com/"

img[0] = path + "news/2010/images/2010-07-09-px.png"
img[1] = path + "news/2010/images/2010-07-09-px2.png"
img[2] = path + "news/2010/images/2010-07-09-px3.png"
img[3] = path + "news/2010/images/2010-07-09-px4.png"

// Add more images here
function changeIMG(direction) {

var current=document.images.nextpic.src;

for (var i = 0;i<img.length;i++) {
if(img[i]==current) {
if(direction=="forward") {
if(i==img.length-1) {
swap(0);
}
else {
swap(i+1);
}
}
if(direction=="back") {
if(i==0) {
swap(img.length-1);
}
else {
swap(i-1);
}
}
break;
}
}
}

function swap(nr) {
document.images.nextpic.src=img[nr];
}

//-->
</script>



BODY


<h4 class="story-headline-top"><a href="http://www.minifigtimes.com/news/2010/2010-07-09-story01.shtml" class="link-plain">
Two known members of the Dalambino Mafia gunned down</a></h4>


<div class="right" style="border: 0px solid black; padding: 20px; float: right; width: 250px; max-width: 250px;">

</div>


<div id="wrapper-main-body">




<div class="farleft">
<a href="http://www.minifigtimes.com/news/2010/2010-07-09-story01.shtml"

<img name="nextpic" src="http://www.minifigtimes.com/news/2010/images/2010-07-09-px.png" onclick="changeIMG();" alt="news">

</a>
</div>
<br>

<b><img src="images/icons/quote1.png" alt="quote"><font color="#888888">
The murders are the latest in a bloody turf war being fought for control of the illegal drugs and arms trade in the capital.</font color>
<img src="images/icons/quote2.png" alt="quote">
</b> <br><i>- Empire Police spokesfig</i><br>
<hr>
<b>Background:</b><br>
<a href="http://www.minifigtimes.com/bg-organised-crime.shtml" class="iframe link-standard">Organised crime in Legoland</a> <img src="images/icons/news-old.png"><br>
<br>
<b>Related Stories:</b>
<br>
<a href="http://www.minifigtimes.com/news/2009/2009-10-20-story02.shtml" class="link-standard">Minifig sought in robbery</a></b> <img src="images/icons/newspaper.png"><br>
<a href="http://www.minifigtimes.com/news/2008/2008-08-08-story01.shtml" class="link-standard">Five officers gunned down</a></b> <img src="images/icons/newspaper.png"><br>
<a href="http://www.minifigtimes.com/news/2008/2008-08-06-story01.shtml" class="link-standard">Police killed in brazen attack</a></b> <img src="images/icons/newspaper.png"><br>
<HR>

<a href="#" onclick="changeIMG('forward');return false;" class="link-comments">More TMTpix&trade;</a> <img src="pics.png" alt="pics">



Any help is really appreciated. I know my site gets errors when I run the Validator but I have fixed most of the ones I am able to. Not sure if it is the reason why I am having the problem in IE.

In summary:
http://www.minifigtimes.com/index-ie.shtml is my test mainpage - the large picture not appearing here in IE

http://www.minifigtimes.com/news/2009/2009-10-20-story02.shtml script, before my edits, working in IE8

http://www.minifigtimes.com/default.css my CSS sheet

Partizan
Jul 11th, 2010, 03:18 PM
Problem solved!

_Aerospace_Eng_
Jul 12th, 2010, 01:39 AM
What was the solution?