Hyperlink and image tips for case study websites
1. Effect of Hyperlink prompts
The browser has a hyperlink prompt. You only need to add the title attribute to the hyperlink.
HtmlCodeAs follows:
<A href =
"#"
Title =
"This is my hyperlink prompt 1 ."
> Tips </a>
However, the response speed of this prompt is very slow. Considering the good human-computer interaction, you need a prompt at the moment when you move the mouse over the hyperlink, in this case, you need to remove the title prompt in the <A> label and manually create a similar function.
.
First, add two normal superlinks and two
Class
.
<P> <a href =
"#"
Class
=
"Tooltip"
Title =
"This is my hyperlink prompt 1"
> Note: 1. </a> </P>
<P> <a href =
"#"
Class
=
"Tooltip"
Title =
"This is my hyperlink Tip 2"
> Tip 2 </a> </P>
<P> <a href =
"#"
Title =
"This is the built-in prompt 1"
> Built-in prompt 1 </a> </P>
<P> <a href =
"#"
Title =
"This is the built-in prompt 2"
> Built-in prompt 2 </a> </P>
Then
Class
Add the Mouseover and mouseout events to the tooltip hyperlink. The jquery code is as follows:
$ (
"A. tooltip"
). Mouseover (function (){
// Display
}). Mouseout (function (){
// Hide
});
The specific ideas for achieving this effect are as follows.
(1) When the mouse slides into the hyperlink.
1. Create a <div> element and the value of the content title attribute of the <div> element.
2. append the created element to the document.
3. Set X and Y coordinates for it so that it is displayed next to the mouse position.
(2) Move the <div> element when the mouse slides out of the hyperlink
Write the following jquery code based on the analysis logic:
$ (Function (){
$ (
"A. tooltip"
). Mouseover (function (e ){
VaR tooltip =
"<Div id = 'tooltip '>" +
This
. Title +
"</Div>"
;
// Create the <div> element
$ (
"Body"
). Append (tooptip );
$ (
"# Tooltip"
).Css ({
"TOP"
: E. Page +
"PX"
,
"Left"
: E. Page +
"PX"
}). Show (
"Fast" );
}). Mouseout (function (){
$ (
"# Tooltip"
). Remove ();
// Move
})
});
At this time, there are two problems: first, when the mouse slides over, the title attribute prompt in the <A> tag will also appear;
The second is the problem of setting the X and Y coordinates. Because the self-made prompt is too close to the mouse, sometimes it will cause problems that cannot be prompted.
(1) When the mouse slides, add a new attribute to the object, pass the title value to this attribute, and then clear the attribute title value.
This
. Mytitle =
This
. Title;
This
. Title =
""
;
VaR tooltip =
"<Div id = 'tooltip '>"
+
This
. Mytitle +
"</Div>" ;
(2) When the mouse clicks, the value of the mytile attribute of the object is assigned to the attribute title.
The jquery code is as follows:
This
. Title =
This
. Mytitle;
<! Doctype HTML public
"-// W3C // dtd xhtml 1.0 transitional // en"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
> <HTML xmlns =
Http://www.w3.org/1999/xhtml"
>
<Head>
<Meta http-equiv =
"Content-Type"
Content =
"Text/html; charset = UTF-8"
/>
<Title> text prompt </title>
<! -- Introduce jquery -->
<SCRIPT src =
Http://www.cnblogs.com/scripts/jquery-1.3.1.js" Type =
"Text/JavaScript"
> </SCRIPT>
<Style type =
"Text/CSS"
>
Body {
Margin: 0;
Padding: 40px;
Background: # FFF;
Font: 80% Arial, Helvetica, sans-serif;
Color: #555;
Line-Height: 180%;
}
P {
Clear: both;
Margin: 0;
Padding:. 5em 0;
}
/* Tooltip */
# Tooltip {
Position: absolute;
Border: 1px solid #333;
Background: # f7f5d1;
Padding: 1px;
Color: #333;
Display: none;
}
</Style>
<SCRIPT type = "Text/JavaScript"
>
// <! [CDATA [
$ (Function (){
VaR x = 10;
Var y = 20;
$ (
"A. tooltip"
). Mouseover (function (e ){
This . Mytitle =
This
. Title;
This
. Title =
""
;
VaR tooltip =
"<Div id = 'tooltip '>"
+
This
. Mytitle +
"<\/Div>" ;
// Create a div Element
$ (
"Body"
). Append (tooltip );
// Append it to the document
$ (
"# Tooltip"
)
. CSS ({
"TOP"
: (E. Pagey + Y) +
"PX"
,
"Left"
: (E. pagex + x) +
"PX"
}). Show (
"Fast"
);
// Set the X and Y coordinates and display them
}). Mouseout (function (){
This
. Title =
This
. Mytitle;
$ (
"# Tooltip"
). Remove ();
// Remove
}). Mousemove (function (e ){
$ (
"# Tooltip"
)
. CSS ({
"TOP"
: (E. Pagey + Y) +
"PX"
,
"Left"
: (E. pagex + x) +
"PX"
});
});
})
//]>
</SCRIPT>
</Head>
<Body>
<P> <a href =
"#" Class
=
"Tooltip"
Title =
"This is my hyperlink prompt 1 ."
> Note: 1. </a> </P>
<P> <a href =
"#"
Class
=
"Tooltip"
Title =
"This is my hyperlink prompt 2 ."
> Note 2. </a> </P>
<P> <a href =
"#" Title =
"This is the built-in prompt 1 ."
> Built-in prompt 1. </a> </P>
<P> <a href =
"#"
Title =
"This is the built-in prompt 2 ."
> Built-in prompt 2. </a> </P>
</Body>
</Html>
Source:Http://www.cnblogs.com/liuyong/
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
