图像映射在悬停时更改图像

时间:2016-08-24 01:13:47

标签: html css wordpress imagemap

我遇到了问题,希望得到一些帮助! 对于我的网站,我想有一个交互式标题。 我为标题上的一个字符制作了一个图像映射,当点击它时会重定向到about页面。

我想在图像悬停在图像映射上时切换图像。 从阅读中我发现我可以在徘徊A级时改变b级 兄弟姐妹标记〜或+我分别尝试了这些标记,但它们没有用。

这是关于标题图像和图像映射的html。

    sharedPref = this.getSharedPreferences("com.lochdownstudios.simplePurchaseOrderer", 
                                                                   Context.MODE_PRIVATE);
    editor = sharedPref.edit();

    save();

我尝试使用+的图像变换的CSS,因为我认为会这样做。

    <div class="td-main-content-wrap td-main-page-wrap">
            <div class="td-container">
                <div class="vc_row wpb_row td-pb-row"><div class="wpb_column vc_column_container td-pb-span12"><div class="wpb_wrapper">
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
    <div class="wpb_wrapper">
        <a href="http://breakline.nl/about/meet-giovanni-boerstra/" class="giomap" title="Meet Gio!" style="position: absolute; left: 70.63%; top: 20.32%; width: 13.85%; height: 39.57%; z-index: 2;"></a><a href="http://breakline.nl/about/meet-stef-verkooijen/" class="stefmap" title="Meet Stef!" style="position: absolute; left: 17.6%; top: 44.28%; width: 14.38%; height: 50.74%; z-index: 2;"></a>
    </div>
</div>

<div class="wpb_single_image wpb_content_element vc_align_center   superheroheader">

    <figure class="wpb_wrapper vc_figure">
        <div class="vc_single_image-wrapper   vc_box_border_grey"><img width="1920" height="743" src="http://breakline.nl/wp-content/uploads/2016/07/Testheadersuperhero2.jpg" class="vc_single_image-img attachment-full" alt="Testheadersuperhero2" srcset="http://breakline.nl/wp-content/uploads/2016/07/Testheadersuperhero2.jpg 1920w, http://breakline.nl/wp-content/uploads/2016/07/Testheadersuperhero2-300x116.jpg 300w, http://breakline.nl/wp-content/uploads/2016/07/Testheadersuperhero2-768x297.jpg 768w, http://breakline.nl/wp-content/uploads/2016/07/Testheadersuperhero2-1024x396.jpg 1024w, http://breakline.nl/wp-content/uploads/2016/07/Testheadersuperhero2-696x269.jpg 696w, http://breakline.nl/wp-content/uploads/2016/07/Testheadersuperhero2-1068x413.jpg 1068w, http://breakline.nl/wp-content/uploads/2016/07/Testheadersuperhero2-1085x420.jpg 1085w" sizes="(max-width: 1920px) 100vw, 1920px"></div>
    </figure>
</div>

如果有任何不清楚的地方,你可能想看看Website。 并查看标题中的超人字符。

0 个答案:

没有答案