|
HTML - Panoramic Image Slide
Hi all,
I would like to display the left 2/3rds of an image, and then immediately pan to the right to switch the view to the right hand side 2/3rds of that image. How can I do this? I've tried the marquee keyword, but that starts with a blank space then slides in the whole image. I want to start with the left 2/3rds then pan to the right 2/3rds then stop. See here for an example: http://www.pinecrestmaine.com/gorham.htm Any ideas how this is done? Thanks, Sandi Similar TutorialsI'm in the process of making a HTML Interactive CD, I have PDF, and Image files and Panoramic files. I have no problem getting the PDF and Image files to run as these programs or typically available on most PC's, and I'm providing the Adobe Installer with the CD in case the user needs it. Now the real problem is my Panoramic files.... I have a Imove viewer this a viewer capable of viewing "Pan" files locally or via CD. I can run these files through an Autorun.inf with out a problem, but I want to run them through an html link... the Imove viewer program requires no dll or installation the only files that exist are the Imove-viewer.exe & Imove-viewer.isu. no matter how I code it I can't get it to run the Pan file in the viewer I have the Imove-viewer.exe & Imove-viewer.isu present in the directory with the Pan files. I've coded it like this "/Panoramics/Imove-viewer.exe Mypan.pan" which tranlates to: "/Panoramics/Imove-viewer.exe%20Mypan.pan" I get "unable to Locate the file" messages. Any help would be appreciated. Hey guys. I need a little help with my HTML image rotator. Everything works fine, except the images don't show up on the right slide. All 4 images show up on the first slide. I can't figure out what's wrong. Any help will be greatly appreciated. Code: <!DOCTYPE html>
<html>
<head>
<title>...</title>
<style>
#sliderwrap {
height: 403px;
}
#sliderleft {
width: 10px;
height: 100%;
float: left;
background: #efefef;
border: 1px solid #ccc;
}
#sliderleft div {
height: 100px;
border-bottom: 1px solid black;
}
#slidercontent {
position: relative;
width: 650px;
height: 100%;
float: left;
border: 1px solid black;
overflow: hidden;
}
#sliderimages {
position: absolute;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
#sliderimages img {
display: block;
}
.s0 #slide0,
.s1 #slide1,
.s2 #slide2,
.s3 #slide3 {
background: #ccc;
}
.s0 #sliderimages {top: 0 }
.s1 #sliderimages {top: -500px}
.s2 #sliderimages {top: -1000px}
.s3 #sliderimages {top: -1500px}
</style>
<script>
var slide = 0;
var interval_id = 0;
function stop_timer() {
clearInterval(interval_id);
if (this.getAttribute("data-slide")) {
slide = parseInt(this.getAttribute("data-slide"));
document.getElementById("sliderwrap").className = "s" + slide;
}
}
function start_timer() {
clearInterval(interval_id);
interval_id = setInterval(
function() {
slide = (slide + 1) % 4;
document.getElementById("sliderwrap").className = "s" + slide;
},
3000
);
}
window.onload = function() {
start_timer();
var el = document.getElementById("slidercontent");
var divs = document.getElementById("sliderleft").getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
divs[i].onmouseover = stop_timer;
divs[i].onmouseout = start_timer;
}
el.onmouseover = stop_timer;
el.onmouseout = start_timer;
}
</script>
</head>
<body>
<div id="sliderwrap" class="s0">
<div id="sliderleft">
<div id="slide0" data-slide="0"></div>
<div id="slide1" data-slide="1"></div>
<div id="slide2" data-slide="2"></div>
<div id="slide3" data-slide="3"></div>
</div>
<div id="slidercontent">
<div id="sliderimages">
<img src="http://i.imgur.com/8iWz6.jpg">
<img src="http://i.imgur.com/1d2U6.jpg">
<img src="http://i.imgur.com/8iWz6.jpg">
<img src="http://i.imgur.com/1d2U6.jpg">
</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
I want to have multiple banners appear every couple seconds like a slide show. Here is my website. (http://www.dubcityfilms.com) The banner is the one with the cars on it. I want to have 5 or so different ones that randomly switch. Can someone help me with this? Thanks. Hi, I'm building a web site for someone. At the top of the page is the logo and some flowing lines going from left to right on screen. If you look he http://www.chrisvanochten.com/clients/voicecontrol/ and start resizing your browser window then you would see the content at the bottom moves along so that it is always in the center. The problem I have is that the image on the top will not do this. This is because it's a background image. I want the image to be positioned so that the logo is above the latest news section. I have tried using a normal image and aligning it to the center (scroll down on the page above for this) but the image is always anchored to the left of the screen if the image is larger than the browser window. Is there anyway to set the background image so that it is anchored in position and that it will run off both the left and right hand side of the screen (as opposed to just the right hand side)? I have tried to find a code for my site to add a slide show for photo's with no luck, has anyone done this and can anyone help me out here? Thanks I am in need of assistance. I have generated a script for a slide in menu and on its own it works alright. However when I try to set it up for multiple slide menus in the same webpage I run in to some issues. Primarily the script only working for one slide on both tabs. So tab 1 hides and and un hides menu and tab 2 does the same thing. Any Ideas???Also when the page loads i need the menu to be closed below I have included the base script Im using any help would be great...thank you <HTML> <head> <style> #tabdiv { z-index: 2; left: 220px; position: absolute; top: 210px } #textdiv { z-index: 1; padding-top: 10px; position: absolute; top: 200px; border-top-width: 1px; padding-right: 5px; padding-left: 5px; border-left-width: 1px; border-left-color: #000099; left: 0px; border-bottom-width: 1px; border-bottom-color: #000099; padding-bottom: 10px; width: 220px; color: black; border-top-color:GREEN; background-color:GREEN; border-right-width: 1px; border-right-color:GREEN } </style> <SCRIPT language=JavaScript1.2> if (document.layers) {n=1;ie=0} if (document.all) {n=0;ie=1} function init() { if (n) tab = document.tabDiv if (n) poptext = document.textdiv if (ie) tab = tabDiv.style if (ie) poptext = textdiv.style } var tabShow=1; function myfunction() { if (tabShow == 1) { if (n) { tab.visibility = "hide"; tab.left = 0; tab.visibility = "show"; poptext.visibility = "hide"; tabShow = 0; return; } if (ie) { tab.visibility = "hidden"; tab.left = 0; tab.visibility = "visible"; poptext.visibility = "hidden"; tabShow = 0; return; } } if (tabShow == 0) { if (n) { tab.visibility = "hide"; tab.left = 220; tab.visibility = "show"; poptext.visibility = "show"; tabShow = 1; } if (ie) { tab.visibility = "hidden"; tab.left = 220; tab.visibility = "visible"; poptext.visibility = "visible"; tabShow = 1; } } } </SCRIPT> </head> <body onload=init()> <!-- Slide-in table start --> <DIV id=tabDiv><B>IRA</B><a href="javascript:myfunction();"> <IMG alt="Click here to close" src="images/popout_menu.gif" width=14 border=0></a></DIV> <DIV id=textdiv> <font face="Verdana" size="2"><B>INDIVIDUAL RETIREMENT ACCOUNT</B></font><br> <font face="Verdana" size="1">IRA is held at a custodian institution such as a bank or brokerage, and may be invested in anything that the custodian allows (for instance, a bank may allow certificates of deposit, and a brokerage may allow stocks and mutual funds). Unlike the Roth IRA, the only criterion for being eligible to contribute to a Traditional IRA is sufficient income to make the contribution.Transactions in the account, including interest, dividends, and capital gains, are not subject to tax while still in the account, but upon withdrawal from the account, withdrawals are subject to federal income tax. </font><br> </DIV> <!-- Slide-in table end --> </body> </HTML> </HTML> how do I create a section slide? This is where say, we have an item on this page. And we can expand/collapse that part from a click of a button? I can't seem to find the examples....but have seen them before. I hope you know what I mean basically just want some panel where I can click on a button, it will expand the contents (slide) and when I click on the button again, it will collapse the contents (sliding back up) I'm trying to figure out how to create a slide show within a static sliced webpage. I'm self taught with Fireworks and am pretty confident however always willing to learn from others whenever I get the chance. The page is for a friend, they have asked me if its possible to have a maximum of 3 images that roatate on a slide show within the page, so the first picture will be there for 4 seconds then the next and so on. Thanks in advance... Well, im using a cool slider to make the page slide to the designated anchor-name. In this case I want the page to slide down to the contact info, when the contact button is clicked at the top. Problem is, that that button is located inside the header.php file... and the browser reacts strange whenever its pressed. HTML Code: <div class="g-contact"><a href="#aanpak" rel="" id="anchor1" class="anchorLink" title="Contact">Contact</a></div> when clicked it should slide smoothly down to: HTML Code: <a name="aanpak" id="anchor1"></a> Please have a look at the situation here. Thanks. I think I kinda know how the coding is thinking... but I wouldnt have the slightest clue how to make it act like I want it to. Help much appreciated, cheers. I have a CD that has a slide show of a fashion show. How can I add this slide show to my web site so that by just clicking on a designated word the slide show will begin? Much appreciated, Jaymom This is what I have in mind, only I would like it a bit better looking http://www.dynamicdrive.com/dynamici...lide/index.htm So basically, a menu thats hidden until you hover over the small part thats visible - then it slides out. Is it possible to do in jquery or mootools or similar ? I cant code myself so some tutorial would be helpful. Thanks in advance This slide show, which I like the functions of, show the size of the show by the side of the photo. Is there a way, other than changing all pictures to about the same size that I can keep the slide show uniform? show at link below TIA http://www.nomagicneon.com/customerphotos.html I have a tabbed content box using jQuery, but I want to show HTML upon loading that is not one of the actual tabs. Here is my code so far. Code: <div id="tabs_container">
<ul id="tabs">
<li><a class="imgrep exceed" href="#tab1">tab1</a></li>
<li><a class="imgrep fun" href="#tab2">tab2</a></li>
<li><a class="imgrep envelope" href="#tab3">tab3</a></li>
<li><a class="imgrep love" href="#tab4">tab4</a></li>
<li><a class="imgrep ceo" href="#tab5">tab5</a></li>
<li><a class="imgrep embrace" href="#tab6">tab6</a></li>
<li><a class="imgrep shoes" href="#tab7">tab7</a></li>
<li><a class="imgrep celebrate" href="#tab8">tab8</a></li>
</ul>
</div>
<div id="tabs_content_container">
<!-- code I want to show as the default slide -->
<div class="tab_content" style="display: block;">
<div id="inside_content">
<p class="inside_h"><span style="color: #00a7d1;">Our Recipes for Success</span></p>
<p class="inside_p">Whether it's a simple assignment or basic interaction with one of the members, our goal is not to just be good, but be better than great.</p>
</div>
</div>
<!-- end default code -->
<!-- Tab 1 -->
<div id="tab1" class="tab_content">
<div id="inside_content">
<p class="inside_h"><span style="color: #00a7d1;">Exceed Expectations everyday.</span></p>
<p class="inside_p">Whether it's a simple assignment or basic interaction with one of the members, our goal is not to just be good, but be better than great.</p>
<ul id="ingredients">
<li>ingredients:</li>
<li>2 determination</li>
<li>1 positive attitude</li>
<li>2 self-motivation</li>
<div id="logo-blue"></div>
</ul>
</div>
</div>
<!-- Tab 2 -->
<div id="tab2" class="tab_content">
<div id="inside_content">
<p class="inside_h"><span style="color: #d18c02;">Have fun.</span></p>
<p class="inside_p">We get to do the unthinkable - work and have a good time. We share that philosophy through. Fun is what makes it so invaluable.</p>
<ul id="ingredients">
<li>ingredients:</li>
<li>1 passion</li>
<li>3 positive attitude</li>
<li>1 goofyness</li>
</ul>
</div>
</div>
... more tabs...
Hi there, you might remember me from this thread. (which was resolved by Mandarin, thanks you!) Now Im back with another, kind of the same thing: "Click -> Locate page -> & then slide down?" Allow me to explain: So ive got this header.php right. And the header file is included at every page. All the links in the header.. link to 1 file. (diensten.php) BUT, each link links to different areas within that file... So what I would like to achieve is that when a link in the header is clicked, it slides down to the correct page-area. Porblem is.... after clicked, is doesnt even go the right page. I think the smooth slider jquery-plugin is interfering someway. I already laid down the groundwork inside the header. Please have a look here. Would my wish be possible? Or should I just lay it to rest? Thanks. Hi, I like to show picture like a slide show like below link http://www.giftedpenguin.co.uk/ PLease tell me how to do that,do i need to do j-script or something? thanks Hello, I am in the very early stages of redesigning our home page. The drop down menus at the top of the page fall behind our rotating (slideshow) images. http://jaxpubliclibrary.org/new-home3.html Z-index does not work to correct this problem. I'd appreciate any help you can give me. Thank you. Linda hi all im after advice on the best way to create a vertical slide show that only changes on a page refresh the images will be shown with a negative film as a frame that is repeated vertically then i will use php code to show a random image inside the frame so, which will be best using the frame as a repeated background image then having a div with the image overlapping this or manually displaying a large image that i have repeated in photoshop. Hi there, Im ( the friend who tested it on her pc ) having trouble with a function, would appreciate any help with this since on my PC all works flawlessly. Even on the browser on she has (Chrome).. OK SCRAP THE ABOVE I just updated my Chrome version.. (seems I need to check the browser version in order to make it update) to the same she has: 12.0.742.112 Annnd.. what do you know. Im having the same issue with my site now. So, chrome 10 -> no problems at all. I update... and, the terror starts. Please, have a look at this website here. The backgrounds may take a while to load.. thanks for your patience. It seems that the page, that needs to slide in from the right. Is having a z-index issue? But their z-index is the highest, so it cant be that. Please have a look at the IE's and FF's for how it should react. I appreciate any input, suggestions or help given! Hi all -- I'm having an interesting problem. I'm designing a web page that has a navigation banner (home - programs - schedule of events - contact us - downloads) that is made up of a .png for each page (i.e. home.png, programs.png, etc). My page is 1000px wide and all of the navigation banner's images add up to 1000px wide. I'm using JavaScript to create an onMouseOver and onMouseOut effect on each of the images. The problem that I'm having occurs when I tried to add a link (either by <A HREF= or using an image map). Whenever I add a link to the image, a small (3px) area of white space shows up to the right of the image. This shifts all of my other images 3px to the right (and 3 more for each link I add to subsequent images) thus making the total width of the navigation banner over 1000px and the last image gets shoved to a new line. I can find no way to get rid of this white space other than to remove the link from the image. There is no property on the page that adds any sort of padding, margins, or borders to images or links, so I can see no property that has to be changed. Help! How do I get rid of this white space but still keep the link on the image?? [I posted this question on the Adobe forum to no avail, below is a screencap I took of the issue I'm having] Thanks in advance! //kl PS - I am using both IE8 and Chrome to view this webpage. I've set all the margins/padding/borders to 0px. Here is my CSS and the part of the code that pertains to the navigation banner. CSS: Code: <style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-image: url(images/blue.bg.png);
background-repeat: repeat;
background-color: #009;
}
.oneColFixCtr #container {
width: 1000px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
body, td, th {
color: #333;
}
#main_banner2 {
margin: 0px;
padding: 0px;
height: auto;
width: 1000px;
}
-->
</style>
</head>
Nav Banner: NOTE:: below HAS to be all one paragraph because if i insert a carriage return in between images, it also adds the white space... Code: <body class="oneColFixCtr"> <!-- MAIN NAVIGATION BANNER --> <!--HOME--><img src="images/nav/home.png" alt="home" name="home" width="82" height="30" border="0" onMouseOver="document.images.home.src='images/nav/home_over.png'" onMouseOut ="document.images.home.src='images/nav/home.png'"/><!--PROGRAMS--><img src="images/nav/programs.png" width="111" height="30" border="0" name="programs" onMouseOver="document.images.programs.src='images/nav/programs_over.png'" onMouseOut ="document.images.programs.src='images/nav/programs.png'"/><!--SCHEDULE OF EVENTS--><img src="images/nav/scheduleofevents.png" width="189" height="30" border="0" name="scheduleofevents" onMouseOver="document.images.scheduleofevents.src='images/nav/scheduleofevents_ over.png'" onMouseOut ="document.images.scheduleofevents.src='images/nav/scheduleofevents.png'"/><!-- CONTACT US--><img src="images/nav/contactus.png" width="119" height="30" border="0" name="contactus" onMouseOver="document.images.contactus.src='images/nav/contactus_over.png'" onMouseOut ="document.images.contactus.src='images/nav/contactus.png'"/><!--DOWNLOADS--><i mg src="images/nav/downloads.png" width="267" height="30" border="0" name="downloads" onMouseOver="document.images.downloads.src='images/nav/downloads_over.png'" onMouseOut ="document.images.downloads.src='images/nav/downloads.png'"/><!--FACEBOOK--><im g src="images/nav/facebook.png" width="90" height="30" border="0" name="facebook" onMouseOver="document.images.facebook.src='images/nav/facebook_over.png'" onMouseOut ="document.images.facebook.src='images/nav/facebook.png'"/><!--TWITTER--><img src="images/nav/twitter.png" width="67" height="30" border="0" name="twitter" onMouseOver="document.images.twitter.src='images/nav/twitter_over.png'" onMouseOut ="document.images.twitter.src='images/nav/twitter.png'"/><!--BLOGGER--><img src="images/nav/blogger.png" width="75" height="30" border="0" name="blogger" onMouseOver="document.images.blogger.src='images/nav/blogger_over.png'" onMouseOut ="document.images.blogger.src='images/nav/blogger.png'"/><img src="images/home_banner.png" alt="home_border" width="1000" height="7" /><br /> So in January 2006 I posted a question about "making two buttons in one" 3 years and 5 months later i am happy to announce that I have found a solution. Ok, so no I have not spent the last three years looking, but the need for one came around again yesterday so I revisited the project. All I needed was "simple" image toggle. Image 'A' click it once it changes to image 'B' click it again it changes back to image 'A' All the "image toggle" codes I could find were extremely complex. I thought I had finally found one, it wasn't perfect, but it was the smallest and most basic thing I could find. HTML Code: <html>
<head>
<style type="text/css">
.on {background-image:url(playlist_btn.png); background-repeat:no-repeat;}
.off {background-image:url(playlist_btn_x.png); background-repeat:no-repeat;}
</style>
<script language="javascript">
function togglestyle(el){if(el.className == "on") {el.className="off";} else {el.className="on";}}
</script>
</head>
<body>
<div id="onoff" class="playlist_btn"><img src="blank.gif" width="50 height="50" onclick="togglestyle(onoff)"></div>
</body>
</html>
I tested it, it worked, so I considered problem solved. I placed it in my page and nothing. Turns out it wont work with a doc type - so it's useless. Other problems, I'm not big on using "blank gif's" unless I have to, if you want multiple image toggles you need a new JS function for each one, and two lines of css as well. And, though I rarely use image rollovers anymore, it would certainly not be possible in this method. So it was back to the drawing board. Well, I had actually already found the solution a few minuets prior to finding out that the above code is so good. I had coded a button that on rollover shows a tooltip, when you click the button, the text in the tool tip, changes, chick again and it reverts. All done with a simple showHide javascript function, that i am finfing out has many uses. here is the awesome code: Code:
function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}
function hideShow(elementid){
if (document.getElementById(elementid).style.display == ''){
document.getElementById(elementid).style.display = 'none';
} else {
document.getElementById(elementid).style.display = '';
}
}
I wont take credit for the showHide code, but I will take credit for the hideShow portion, obviously a monkey could have coded the revers, but iot does make it that much more universal. As the original code was designed to show something that was hidden, add the revers to hide something that is showing and it's perfect. Now I will take a moment to say, though I have yet to find a problem with the code, it seems to work in most browsers, firefox, ie, safari, and validates for WC3 - In sure it has it's flaws. Until now, to show and hide divs I had used the MM_showHideLayers JavaScript function, which by default used the visibility style. It is of course a good script, and has many uses, it's not very big, but it is somewhat complex. The other thing to think about is that invisible objects still take up space. That's what is cool about the display:none: style, is that is not only invisible but it doesn't take up space. So here is how I used the above to JavaScript to make a simple onclick image toggle: HTML Code: <img id="on" src="on.png" width="50" height="50" onClick="javascript:hideShow('on'); javascript:showHide('off')" alt="on">
<img id="off" src="off.png" width="50" height="50" onClick="javascript:hideShow('off'); javascript:showHide('plus')" style="display:none;" alt="off">
Cool huh? Now this example does not have a rollover either, but since it uses to individual images and is not replacing one image wioth another you could easily apply a rollover to both images. But, hold on, look at the above code, isn't that essentially a rollover? Change the first onClick to onMouseOver and the second to onMouseOut and look at that a 'brand new' method for mouseovers. So lets take a look at this for a second, and compare MM_swapImage to this new hideShow method. As far as CSS rollovers I definitely prefer them to the MM_swapImage method, as they use a minimal amount of code. However they actually take a lot of math, construction the buttons is somewhat tedious, because css buttons use 1 image and change it's position, to work well you have to use a "blank.gif" and the the css can really add up if you have a lot of buttons: Also, you can't go directly to a button in the document, you have to fish through the css to make any adjustments. But they are fast, they don't need to be preloaded and... they are pretty cool. But anyway, swapImage and hideShow... The left is the MM_swapImage method. Now when you use the swapImage js you also have to use MM_swapImgRestore, MM_findObj, MM_preloadImages. You don't have to use the preload script but it does make thing work faster... supposedly, but that requires a onload script in the body tag, and if you have a lot of rollovers your body tag can get really long really quick. So what are the advantages, well we know for sure it works, and you only need on image in the document, however actualy having the image you are "swapping" too actually in the document can add functionality. So as you can see, on the right, the showHide method is, in total code, much smaller. True you do need to use two images, so the total code in the body is longer but, it's more than evened out bu the minimal JavaScript, and I think it's worth it. You don't need to use a preloader, you have full control over both images, the up and over state, and unlike the swapImage method, though it's rare you would need to, your up and over images can actually be different sizes, which is kind of cool. So here's the basic code for a rollover: HTML Code: <img id="up" src="up.png" width="50" height="50" onMouseOver="javascript:hideShow('up'); javascript:showHide('over')" alt="up">
<a href="http://google.com"><img id="over" src="over.png" width="50" height="50" onMouseOut="javascript:hideShow('over'); javascript:showHide('up')" style="display:none;" alt="over" border="0"></a>
To add a link the button you just apply it to the "over state" image. And unlike swapImage, though it is overkill, you can also add a "downstate" image quite easily. So, back to the on/off button here is how you would code it using showHide with rollovers. HTML Code: <img id="on" src="on.png" width="50" height="50" onMouseOver="javascript:hideShow('on'); javascript:showHide('onover')" alt="on">
<img id="onover" src="on_over.png" width="50" height="50" onMouseOut="javascript:hideShow('onover'); javascript:showHide('on')" onClick="javascript:hideShow('onover'); javascript:showHide('offover')" style="display:none;" alt="onover">
<img id="off" src="off.png" width="50" height="50" onMouseOver="javascript:hideShow('off'); javascript:showHide('offover')" style="display:none;" alt="off">
<img id="offover" src="off_over.png" width="50" height="50" style="display:none;" onMouseout="javascript:hideShow('offover'); javascript:showHide('off')" onClick="javascript:hideShow('onover'); javascript:showHide('off')"alt="offover">
So here is what is going on: you have the upstate on.png image, when you mouse over it on.png is hidden and on_over.png is displayed. When you click on_over.png it is hidden and off_over.png is display, mouse off it and off.png is displayed. Make scene? Now be aware, when you click, you are also in a scene "mousing off" so some flickering can occur. Firefox handles everything pretty well, IE and Safari not so much. When you click the on_over.png the click tells it to hide on_over.png and show the off_over.png, at the same time the mouseoff tells it to hide on_over.png and show the on.png. So fortunately the toggle with rollovers isn't perfect, but perhaps some more tweaking of the code or maybe, in this case swapImage would work better to do the rollovers... But all in all I'd say its a solid concept. If you feel compiled to do so, reply with any comments, concerns or flaws you see. |
|||||||