Home > Developer > Web Develop
Picture rollover: Picture is replaced with the mouse pointer across
<src= "Example.gif" onmouseover= "this.src= ' exampletwo.gif '" onmouseout = "this.src= ' example.gif '" />
The effect of flipping images like a picture requires a high degree of responsiveness, which also means finding ways to make sure that some of the necessary images are pre-extracted and cached by the browser.
Client-side JavaScript defines a dedicated API to achieve this purpose:
To force the picture to be cached, first use the image () constructor to create an offscreen image object, after which the SRC attribute of the object is set to the desired URL.
Because the picture element is not added to the document, it is not visible, but the browser loads the picture and caches it.
That way, when you set the same URL to display the picture in the screen, it will quickly load from the browser, without having to load it over the network.
<!DOCTYPE HTML><HTML><Head> <title></title><style>img{position:Absolute;Top:0;Bottom:0; Left:0; Right:0;margin:Auto; }</style></Head><Body><imgsrc= ' {$Think. const.img_src}1.jpg 'Data-rollover= "{$Think. Const.img_src}2.jpg"width= "300px"Height= "300px"><Script> /*call a function when document loading is complete*/ //register function f, execute this function when document loading is complete F //if the document is already loaded and finished, execute it asynchronously as soon as possible. functionOnLoad (f) {if(onload.loaded)//if the document is already loaded completewindow.settimeout (F,0); //put F in a queue and execute it as soon as possible Else if(Window.addeventlistener)//standard method for registering eventsWindow.addeventlistener ("Load", F,false); Else if(window.attachevent)//How to register events with IE8 and earlier IE version browsersWindow.attachevent ("onload", F); } //set the onload flag to indicate that the document was loaded when it was completedonload.loaded=false; //register a function to set this flag when document loading is completeOnLoad (function() {onload.loaded=true; }); /*Elegant Picture Rollover implementation Method * * Use the Data-rollover property on the IMG element to specify the URL of the rollover image * **/OnLoad (function(){ //all handlers are in an anonymous function and do not define any symbols //Traverse all the pictures to find the Data-rollover property for(varI=0; I<Document.images.length;i++){ varimg=Document.images[i]; varRollover=Img.getattribute ('Data-rollover'); if(!rollover)Continue; //skip a picture without the Data-rollover property //Make sure that the flipped picture is cached (NewImage ()). SRC=rollover; //define a property to flag the default picture URLImg.setattribute ("Data-rollout", IMG.SRC); //registering a time-processing function to create a rollover effectImg.onmouseover=function(){ This. SRC= This. getattribute ("Data-rollover"); }; Img.onmouseout=function(){ This. SRC= This. getattribute ("Data-rollout"); } } }); </Script></Body></HTML>
"Apply" Picture Flip JS
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
