How to move the JQuery mouse over a small image to display the big image?

How to move the JQuery mouse over a small image to display the big image?

This document describes how to show the effect of a large image by moving the JQuery mouse over a small image. Share it with you for your reference. The specific analysis is as follows:

The function of displaying a large image here is similar to the previous "JQuery method for implementing the effect of Hyperlink mouse prompts". You can modify the code slightly to make a prompt effect for an image.

Refer to the code that prompts the effect of the previous hyperlink. You only need to change the code of the created div element:

// When you create a div element image, the following error occurs: var tooltip = "<div id =" tooltip ">  <\/div> "; </div>

When you move the mouse over the image, a large image is displayed. In order to make the effect more user-friendly, you also need to add the description text for the image, that is, the corresponding description text of the image appears under the large image prompted.

You can obtain the corresponding description text of the Image Based on the title attribute value of the hyperlink. The JQuery code is as follows:

this.myTitle = this.title; this.title = "";  var imgTitle = this.myTitle? "<br />" + this.myTitle : "";

Then append it to the div element. The Code is as follows:

// Create the div element var tooltip = "<div id = 'tooltip '>  ";

The Trielement operation is used to determine whether this. myTitle is. The three-element operation structure is: Boolean? Value 1: Value 2. It must have a Boolean value for the 1st parameters. Of course, the ternary operation can also be replaced by "if () {} else {}", for example:

var imgTitle; if (this.myTitle) {   imgTitle = "<br />" + this.myTitle; } else {   imgTitle = ""; }

In this way, the image prompt effect is complete. When the mouse slides over the image, the picture will be previewed in a large image, and the text below the big picture will be introduced.

The complete code for this example is as follows:

<Script type = "text/javascript"> // <! [CDATA [$ (function () {var x = 10; var y = 20; $ (". tooltip "). mouseover (function (e) {this. myTitle = this. title; this. title = ""; var imgTitle = this. myTitle? "<Br/>" + this. myTitle: ""; var tooltip = "<div id = 'tooltip '>  </script>

I hope this article will help you with jQuery programming.