Imagemap: нажмите, чтобы отобразить текст

Я пытаюсь отобразить изображение с интерактивными областями, в котором показано другое текстовое описание в нижней части изображения для каждой зоны с кликом. Это код, у меня есть:Imagemap: нажмите, чтобы отобразить текст

Edit: Я не могу понять, как получить этот код, чтобы отобразить правильно либо, извините :(

<DOCTYPE! html> 
<head> 
<style> 
    a .img { 
    border:none; 
    } 
    .caption { 
    display: none; 
     } 

    .caption:target { 
     display: block; 
     position: absolute; 
     top: 510; 
     text-align: centre; 
     } 

    body { 
     background-color: #1e1e1e; 
     color: #ffffff; 
     font-family: Trebuchet MS; 
     font-size: 16pt;   
     } 

</style> 
</head> 
<body> 
<img src="blahblah.png" usemap="#blahblah"> 
    <map name="blahblah"> 

    <area shape="rect" coords="XX,XX,XXX,XXX" href="#text1"> 
    <div class=caption id=text1> 
     <u>display some text</u> 
     </div> 
    <area shape="rect" coords="XX,XX,XXX,XX" href="#text2"> 
    <div class=caption id=text2> 
     <u>display some other text</u> 
     </div> 
</body> 
</html>

Он отлично работает в Chrome, но мой текст не будет появятся в IE8. Может кто-нибудь сказать мне, почему и, возможно, предложить исправить? Пытаюсь избежать javascript, потому что я почти ничего не знаю об этом.

источник

2016-08-01 A_Mac

Причина, по которой это не работает в IE8, заключается в том, что вы используете в своем CSS селектор :target. Это селектор CSS3, который не поддерживается в IE8. См. документацию: http://www.w3schools.com/cssref/sel_target.asp

Простым решением было бы использовать внешнюю библиотеку Javascript: selectivizr.

Это позволяет использовать любые свойства CSS3. Имейте в виду, если вы используете это, вам также необходимо включить jQuery.

Ваш HTML будет выглядеть примерно так:

<DOCTYPE! html> 
<head> 
<!-- CDN VERSION OF jQUERY, You can also download it --> 
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> 
<script type="text/javascript" src="[JS library]"></script> 
<!--[if (gte IE 6)&(lte IE 8)]> 
    <script type="text/javascript" src="selectivizr.js"></script> 
    <noscript><link rel="stylesheet" href="[fallback css]" /></noscript> 
<![endif]--> 
</head> 
<!-- The rest of your HTML -->

Если вы просто включить эти два сценария в вашей HTML, без каких-либо дополнительных модификаций, ваш сайт будет работать.

источник

2016-08-01 10:04:45 Rotan075

Извините, но это не сработало. Я скопировал эти сценарии и поместил их в раздел главы. Я установил 'src = jquery.js', но ничего не изменилось. –

@A_Mac вы загрузили файл selectivizr.js со своего сайта и вставляете исходный код в файлы сценария, например: '' ?? – Rotan075

У меня есть. Я просто прочитал файл readme, прикрепленный к загруженному, и он говорит, что есть ошибка с: псевдоним-мишенью. По-видимому, он не будет работать с jQuery, но будет работать с Sizzle, поэтому я собираюсь попробовать это –

Imagemap: нажмите, чтобы отобразить текст

ответ

Смежные вопросы