Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 460
  • Last Modified:

Cycling images with javascript...

I've pretty much got this working but for one tiny problem...

Go to http://ns1.aetechsystems.co.uk/~white666 and click on the Contacts link on the right side of the navbar.

You should see a map on the right. The idea, as you have by now worked out, is that clicking the zoom in or zoom out buttons changes the map image.
The image displayed to start with is map 3 out of 5 and the src property is set in the HTML code. All 5 images are preloaded on page load.

To see the problem (I've only tried this in IE 6 atm) just click on one of the zoom buttons and then click the other one to go back to the starting image. Now unless it's just my browser acting out some personal vendetta against me then you'll probably find that you have to right click where the image should be and select 'Show Picture' to see it again. Obviously this is not the desired effect so any suggestions?

Oh, I noticed that if you navigate away from the page then use the back button to return then everything works fine.

I use the following JS to cycle through them...

if(!cycle){
      var cycle = 3; //Sets the starting value of cycle at page load
}

function picswap(zoom){
      var image = document.getElementById('mapimage');
      if(zoom == 'in'){
            cycle = cycle + 1;
            image.src = 'images/maps/map'+cycle+'.jpg';
      } else {
            cycle = cycle - 1;
            image.src = 'images/maps/map'+cycle+'.jpg';
      }
      if(cycle < 2){
            document.zoomin.style.display = 'inline'
            document.zoomout.style.display = 'none'
      } else if(cycle > 4){
            document.zoomin.style.display = 'none'
            document.zoomout.style.display = 'inline'
      } else {
            document.zoomin.style.display = 'inline'
            document.zoomout.style.display = 'inline'
      }
}
0
Andy
Asked:
Andy
  • 6
  • 5
  • 2
  • +1
1 Solution
 
[ fanpages ]IT Services ConsultantCommented:
Seems to work fine in Mozilla Firefox 1.0.3, & my MS-IE 6.0, btw.

Try changing your browser settings ("Tools" / "Internet Options..." / [Advanced] tab / "Multimedia" group) to "Show pictures".

BFN,

fp.
0
 
archrajanCommented:
I cannot dupicate the problem in IE6 andFirefox
0
 
[ fanpages ]IT Services ConsultantCommented:
With the "Show pictures" option disabled, I can reproduce the problem in MS-IE 6.0; then checking to "Show pictures" allows the script to run as intended.

BFN,

fp.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Michel PlungjanIT ExpertCommented:
1. change all  
<a href="javascript:someJavascriptfunction()"
to
<a href="#" onClick="someJavascriptfunction(); return false">

for example
<a href="javascript:document.emailform.submit()"
becomes
<a href="#" onClick="document.emailform.submit(); return false"

2. change all
<a href="javascript:;" onClick="javascriptfunction()"
to
<a href="#" onClick="javascriptfunction(); return false"
so
<a href="javascript:;" onClick="picswap('in')"
becomes
<a href="#" onClick="picswap('in'); return false"

0
 
Michel PlungjanIT ExpertCommented:
Also PLEASE change
        <td colspan="2"><div align="center"><a href="javascript:document.emailform.submit()" onMouseOver="MM_swapImage('Image1','','images/gfx/b_send_over.png',1)" onMouseOut="MM_swapImgRestore()"><img src="images/gfx/b_send.png" name="Image1" width="100" height="45" border="0" id="Image1"></a><a href="javascript:document.emailform.reset()" onMouseOver="MM_swapImage('but_clear','','images/gfx/b_clear_over.png',1)" onMouseOut="MM_swapImgRestore()"><img src="images/gfx/b_clear.png" name="but_clear" width="100" height="45" border="0" align="absmiddle" id="but_clear"></a></div></td>

to

        <td colspan="2" align="center"><a href="javascript:document.emailform.submit()" onMouseOver="MM_swapImage('Image1','','images/gfx/b_send_over.png',1)" onMouseOut="MM_swapImgRestore()"><img src="images/gfx/b_send.png" name="Image1" width="100" height="45" border="0" id="Image1" align="absmiddle"></a><a href="javascript:document.emailform.reset()" onMouseOver="MM_swapImage('but_clear','','images/gfx/b_clear_over.png',1)" onMouseOut="MM_swapImgRestore()"><img src="images/gfx/b_clear.png" name="but_clear" width="100" height="45" border="0" align="absmiddle" id="but_clear"></a></td>

unless you LIKE the images not next to each other
0
 
[ fanpages ]IT Services ConsultantCommented:
I repeat... no problem in MS-IE 6.0 with the "Show pictures" option checked.

No problem in Firefox 1.0.3 at all.

No need to change any Javascript.

BFN,

fp.
0
 
Michel PlungjanIT ExpertCommented:
no immediately VISIBLE problem....

Trust me that there are problems with javascript hrefs and not returning false on onclicks.
0
 
[ fanpages ]IT Services ConsultantCommented:
Agreed... but without further explanation you may lead the question asker to believe that will fix the problem with the lack of images.
0
 
Michel PlungjanIT ExpertCommented:
It might very well do just that...
0
 
AndyAuthor Commented:
Show Pictures is already enabled.

mplungjan, making the changes you suggested in your first post has indeed fixed the problem. Strange how it did not affect everyone though.

You get the points but if you could take a minute to explain it I would appreciate it.

Cheers.
0
 
[ fanpages ]IT Services ConsultantCommented:
Which version of MS-IE are you using Reapz?

Yes, it is indeed interesting to read that only you browser was affected.

BFN,

fp.
0
 
Michel PlungjanIT ExpertCommented:
When you click on a link, the page is unloaded unless the onClick event returns false.
In the case of
<a href="javascript:....">
you may get the result of the javascript like [object]  if you have <a href="javascript:window.open(...)">
If you have <a href="#" onClick="somefunction()"
the page is reloaded (the browser will load the anchor # which is empty, e.g. just reload the page)
this may not be visible, but some of the scripts on the page are cleared.

This is very visible if you have animated gifs on the page. The animation stops and that seems to be the only thing that is wrong, but some browsers will be left in an undetermined state

So if you return false in the onClick you will stop many problems.

 Michel
0
 
AndyAuthor Commented:
Thanks for the info mplungjan.

FYI fanpages full IE verison info: 6.0.2900.2180.xpsp_sp2_gdr.050301-1519
0
 
[ fanpages ]IT Services ConsultantCommented:
Hi again,

Thanks for your browser version information.

My local installation is: Version 6.0.2800.1106.xpsp2.030422-1633
plus
Update Versions: SP1; Q810847; Q813489; Q813951; Q330994; Q818529

If anybody else can use site without modification, perhaps they too could post their browser version information.

We may find a point where the browser ceased functioning (correctly) if we have a wide range of differing installations.

BFN,

fp.
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 6
  • 5
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now