jquery – 地图区域标签上的工具提示

前端之家收集整理的这篇文章主要介绍了jquery – 地图区域标签上的工具提示前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个地图和区域,标题在这里代码
<map name="Map" id="Map">
        <area alt="" shape="rect" coords="127,52,186,71" href="#" title="Extending telephone lines to other Egyptian governorates; Ismailia,Port Said and Suez to serve 50 subscribers."
            class="vtip" id="lnk883" />
        <area alt="" shape="rect" coords="9,54,66,72" href="#" title=" witnessed the birth of Egypt's telecommunications industry. The first telegraph line connecting Cairo and Alexandria was inaugurated early in 1854,forming the company that was later to become Telecom Egypt."
            class="vtip" id="lnk854" />
        <area alt="" shape="rect" coords="70,114,127,132" href="#" title="  The first telephone line between Cairo and Alexandria was installed."
            class="vtip" id="lnk881" />
        <area alt="" shape="rect" coords="188,113,247,132" href="#" title="The Egyptian Government nationalized the Eastern Telephone Company for 755,000 L.E. and turned it into Telephones & Telegraph Authority,a forerunner of Telecom Egypt.  The number of telephone lines in Egypt reached 62,000."
            class="vtip" id="lnk918" />
        <area alt="" shape="rect" coords="297,356,132" href="#" title="The car phone service was launched along with the first microwave network between Cairo,Alexandria and Al Salloum to interconnect Egyptian provinces.
    "
            class="vtip" id="lnk975" />
        <area alt="" shape="rect" coords="238,53,297,72" href="#" title="  - in the wake of nationalizing Egypt’s Telegraph and Telephone Company in 1918,the state established The Arab Republic of Egypt Telecommunications Organization (ARETO) as the exclusive provider of all telecommunication services in Egypt,which was later to become Telecom Egypt. "
            class="vtip" id="lnk957" />
        <area alt="" shape="rect" coords="345,404,72" href="#" title=" With a capacity of 120 channels,the first earth station linking Egypt by satellite to the rest of the world was opened in Maadi.
   "
            class="vtip" id="lnk978" />
        <area alt="" shape="rect" coords="407,466,132" href="#" title="ARETO,which was later to become Telecom Egypt was renamed the Arab Republic of Egypt National Telecommunication (ARENTO) and established under law 153 of 1980. "
            class="vtip" id="lnk980" />
        <area alt="" shape="rect" coords="463,522,72" href="#" title=" Operating of the first fiber-optic cable entirely connecting Cairo’s telephone systems "
            class="vtip" id="lnk985" />
        <area alt="" shape="rect" coords="572,631,73" href="#" title="Telecom Egypt launched its first mobile services."
            class="vtip" id="lnk996" />
        <area alt="" shape="rect" coords="628,687,132" href="#" title="Telecom Egypt was transformed into a joint stock company,the Egyptian Government maintaining 100% ownership of the 171,121,490 shares in issue.
    "
            class="vtip" id="lnk998" />
        <area alt="" shape="rect" coords="686,745,72" href="#" title="Introduction of the new value added services (VAS),the Integrated Services Digital Network (ISDN) and the Intelligent Network (IN) services.
  "
            class="vtip" id="lnk999" />
        <area alt="" shape="rect" coords="518,577,132" href="#" title="Installing the first Data Network in Egypt,EGYPTNET."
            class="vtip" id="lnk989" />
        <area alt="" shape="rect" coords="745,804,132" href="#" title="E-payment methods were launched for billing inquiries and payments via Internet."
            class="vtip" id="lnk2001" />
        <area alt="" shape="rect" coords="798,857,72" href="#" title="    Launching the free internet service in Cairo,which was extended to all Egyptian governorates. Following this,the largest call center serving TE’S customers across all governorates was established."
            class="vtip" id="lnk2002" />
        <area alt="" shape="rect" coords="859,111,918,130" href="#" title=" Telecom Egypt acquired an 8.6% ownership stake in Vodafone Egypt.e"
            class="vtip" id="lnk2003" />
        <area alt="" shape="rect" coords="919,978,72" href="#" title=" - Consortium Algerien Des Telecommunications s.p.a (CAT),a joint venture between Telecom Egypt and Orascom Telecom Holding was awarded a 15 year renewable license to operate fixed-line services in Algeria under the brand name of 'Lacom'.

    - Signing a new strategic cooperation agreement with Vodafone Egypt,extending and expanding an earlier deal between the two operators.
    - Telecom Egypt obtained an additional ownership stake of 16.9% in Vodafone Egypt,bringing total ownership to 25.5%.
    - Telecom Egypt issued the largest corporate bond in Egypt to date,raising EGP 2 billion.
    - The Egyptian Government announced the launch of an initial public offering of its Telecom Egypt shares and GDRs to retail investors in Egypt and     institutional investors internationally. The Offer represented 20% of Telecom Egypt's outstanding share capital and raised over $US 890 million. At the time of the Offer,it was the largest international equity offering to come out of the Middle East and North Africa region.

    -Telecom Egypt shares and GDRs commenced trading on the Egyptian Stock Exchange (Formerly known as Cairo and Alexandria) and London Stock Exchanges,making a major landmark in the history of the company. "
            class="vtip" id="lnk2005" />
        <area alt="" shape="rect" coords="977,112,1036,131" href="#" title=" - Telecom Egypt announced the outcome of its Public Tender Offer to acquire an additional stake of up to 24.4% of Vodafone Egypt. Telecom Egypt's shareholding stake in Vodafone Egypt reached 48.97%.

    - Telecom Egypt enters Into an MOU with Several Leading Telecommunications Operators to Work Jointly to Construct a New Submarine Cable System Linking India,Middle East and Western Europe.

    - Vodafone Group and Telecom Egypt announced that they entered into a new strategic partnership to increase cooperation between both parties and to jointly develop a range of products and services for the Egyptian market. Telecom Egypt’s shareholding stake in Vodafone Egypt reached 44.66% after tendering 4.31% of Vodafone Egypt to Vodafone. A couple of months later,Telecom Egypt bought around 320,000 shares of Vodafone Egypt bringing up its shareholding stake from 44.66% to 44.79% in Vodafone Egypt.

    - Telecom Egypt’s internet subsidiary TE Data launched the first IP-TV based entertainment service in Egypt.

- Telecom Egypt’s Internet Subsidiary,TE Data,launched an International prepaid calling card service using VoIP technology from any fixed line in Jordan through its fully owned subsidiary TE Data Jordan."
            class="vtip" id="lnk2006" />
        <area alt="" shape="rect" coords="1031,1090,72" href="#" title=" - Telecom Egypt signed a contract with the India-Middle-East-Western Europe (IMEWE) Submarine Cable System through TE transit Corridor. The deal amounted to US $36 million.

- Telecom Egypt signed Two Contracts with SEACOM and VSNL in Relation to its TE North Submarine Cable Project – Deal worth US$90 Million."
            class="vtip" id="lnk2007" />
        <area alt="" shape="rect" coords="1091,1150,133" href="#" title=" - Telecom Egypt bought around 370,000 shares of Vodafone Egypt bringing up its shareholding stake from 44.79% to 44.95% in Vodafone Egypt.

- Telecom Egypt and Alcatel-Lucent have signed a US$125 million contract to deploy a new submarine cable network linking Sidi Kerir in Egypt to Marseille in France,named TE North.

- Telecom Egypt signed a US$50 million contract with EIG in relation to its TE Transit Corridor. EIG will be the first consortium system to use TE North and South new landing stations in Sidi Kerir and Ras Sidr,and shall land in Europe in Monaco and connect thereof to Marseille,as well as the UK.

 - Telecom Egypt along with 15 other telecommunication companies,signed a formal Construction and Maintenance Agreement (C&MA) to build the first direct,high-bandwidth optical-fiber Submarine cable system from the United Kingdom to India.  "
            class="vtip" id="lnk2008" />
        <area alt="" shape="rect" coords="1146,1205,72" href="#" title=" - Telecom Egypt & Vodafone Egypt signed a 3-year agreement for the provision of wholesale telecommunications services. The deal comprises two distinct elements: Utilizing TE international gateway services to transit all VFE customers incoming and outgoing international traffic plus relying on TE extensive domestic network for all VFE infrastructure leasing needs.

- Telecom Egypt and Cyprus Telecommunications Authority (CYTA) entered into an agreement to cooperate through extension of Telecom Egypt’s TEN Cable System to Cyprus,creating reciprocal Eurasia and Eastern Mediterranean opportunities

- TE Data launches TE Live in Cooperation with Microsoft,the first service of its kind in Egypt and the Middle East. The service depends on synchronization over the Internet of all instant communication methods. All of these features could be easily used anywhere online or via a mobile device.

- Increased broadband market shares from 59.02% to 60.85%.

- Continuous rollout of modern “Phone Boutique” shop concept (so far in 2009,35 additional sites opened in strategic locations).

- Telecom Egypt launched its first Fiber-To-The-Home (FTTH) implementation in Egypt in Cairo Suburb area of Qatamiya. This represents a major achievement which enables the company to provide new and integrated services that cater for current and future needs for residential and business customers through the fixed networks."
            class="vtip" id="lnk2009" />
        <area alt="" shape="rect" coords="1205,1264,132" href="#" title=" - Telecom Egypt acquired the remaining 4.95% of TE Data’s Stake,to have full ownership of its broadband subsidiary."
            class="vtip" id="lnk2010" />
        <area shape="rect" coords="1264,1312,73" href="#" title="Telecom Egypt and Alcate l-Lucent have announced that the TE-NORTH Cable System,provisioned with 40 Gigabit per second (40G) wavelengths    
across the Mediterranean,is in service. TE-NORTH is the first Mediterranean cable network to provide commercial service using this newest 40G technology.In 2011,our fully owned broadband subsidiary,had a record year.  It surpassed one million subscribers and recorded a revenue contribution of more than EGP 1 billion for the first time."
            class="vtip" id="lnk2011" />

    </map>

我希望当悬停在任何一个区域显示很酷的工具提示它的显示一个已经来自区域标题但它的丑陋,我看到所有的工具提示与jquery的例子他们都工作在普通标签而不是任何帮助???

解决方法

使用 qTip2,这是使用当前区域标记的基本实现:

一定要引用jQuery,jquery.qtip.min.css和jquery.qtip.min.js

jQuery(document).ready(function (e) {
    jQuery('area').qtip({
        style: {
            classes: 'qtip-dark'
        },events: {
            show: function(event,api) {
                api.set({
                    'content.text': api.elements.target.attr('title')
                });
            }
        }
    });
});
原文链接:https://www.f2er.com/jquery/181353.html

猜你在找的jQuery相关文章