The specific usage is this:
Putting JavaScript code in front of </body> (putting script code at the bottom of the page helps improve page speed, but I don't have a personal experience right now)
Copy Code code as follows:
<script language=javascript>
function mouseoutpic ()///When the mouse is moved out, hide the original artwork
{
if (window.event.toelement.id!= "img000") bigPic.style.visibility = "hidden";
If the mouse is not on the img000, hide the area
}
function Mouseoverpic (IMGSRC)///When the mouse is over a small image, display the original artwork
{
var seebig = document.getElementById ("Bigpic"); Get the div element that will display the original area
var newimg = document.createelement ("img"); Create an IMG element to assign the original src to this element
newimg = " "; Notice here, it's for the entire element, and I've spent a lot of time on this little problem.
alert (IMGSRC);
seebig.innerhtml = newimg; Assign the artwork to the area you want to display
}
</script>
Here is the HTML code:
Copy Code code as follows:
<!--The following ID is the img000 element is a thumbnail, the mouse hovers over it appears the original-->
The Mouseoverpic function is called in the <!--onmouseover method (see above), and the parameters passed to it are the original url-->
<!--call Mouseoverpic, set the original display area to visible-->
<!--when the page is initialized, the original display area is hidden-->
<div id= "Bigpic" style= "Visibility:hidden;" >
</div>
The above code does not control where the original image appears, and if it involves a position near the edge of the window, it will use attributes such as offsetleft.
Think about it, actually this is quite simple. The need to write JavaScript more attention to detail, this is too important, inadvertently will be wrong, the worst is not know where the wrong.
