getting backgroundImage for image changer..
hi, this will seem a little nooby, but..i'm trying to use a mobile friendly (i.e. non flash) image changer using js?
this works in chrome and safari, but not opera, ie or ff? grr!
http://tigerbaydesign.co.uk/imagech.html
i'm thinking it's tied up with getting the backgroundImage first because i know all browsers are getting inside the action braces..
you can view source or look at this:
what am i doing wrong?!HTML Code:<title>image change test</title> <link href="imagech.css" rel="stylesheet" type="text/css" /> <script> function changeImage(action) { obj=document.getElementById('mainimg'); if(obj.currentStyle) eimg=obj.currentStyle.backgroundImage; else eimg=getComputedStyle(obj,'').getPropertyValue('background-image'); if (action=="prev") { if (eimg=='url(http://tigerbaydesign.co.uk/tb_images/intro_01.jpg)') { mainimg.style.backgroundImage="url('tb_images/intro_05.jpg')"; var eimg=0; }; if (eimg=='url(http://tigerbaydesign.co.uk/tb_images/intro_02.jpg)') { mainimg.style.backgroundImage="url('tb_images/intro_01.jpg')"; var eimg=0; }; if (eimg=='url(http://tigerbaydesign.co.uk/tb_images/intro_03.jpg)') { mainimg.style.backgroundImage="url('tb_images/intro_02.jpg')"; var eimg=0; }; if (eimg=='url(http://tigerbaydesign.co.uk/tb_images/intro_04.jpg)') { mainimg.style.backgroundImage="url('tb_images/intro_03.jpg')"; var eimg=0; }; if (eimg=='url(http://tigerbaydesign.co.uk/tb_images/intro_05.jpg)') { mainimg.style.backgroundImage="url('tb_images/intro_04.jpg')"; var eimg=0; }; } if (action=="next") { if (eimg=='url(http://tigerbaydesign.co.uk/tb_images/intro_01.jpg)') { mainimg.style.backgroundImage="url('tb_images/intro_02.jpg')"; var eimg=0; }; if (eimg=='url(http://tigerbaydesign.co.uk/tb_images/intro_02.jpg)') { mainimg.style.backgroundImage="url('tb_images/intro_03.jpg')"; var eimg=0; }; if (eimg=='url(http://tigerbaydesign.co.uk/tb_images/intro_03.jpg)') { mainimg.style.backgroundImage="url('tb_images/intro_04.jpg')"; var eimg=0; }; if (eimg=='url(http://tigerbaydesign.co.uk/tb_images/intro_04.jpg)') { mainimg.style.backgroundImage="url('tb_images/intro_05.jpg')"; var eimg=0; }; if (eimg=='url(http://tigerbaydesign.co.uk/tb_images/intro_05.jpg)') { mainimg.style.backgroundImage="url('tb_images/intro_01.jpg')"; var eimg=0; }; } } </script> </head> <body> <div id="mainimg"> <div id="prevb"><a href="javascript:changeImage('prev')">previous</a></div> <div id="nextb"><a href="javascript:changeImage('next')">next</a></div> </div> </body>
Reply With Quote
Bookmarks