Часть картинки как ссылка на wordpress

А вы прочтите внимательно, посмотрите примеры:

http://htmlbook.ru/html/map

И все получится

Спасибо, разобрался.

Вот только не пойму, как сделать так, чтобы при наведении на ссылку менялся шрифт.

вот код

<IMG SRC="http://lifan.dp.ua/wp-content/uploads/2011/05/0-1.jpg" BORDER=0 WIDTH=967 HEIGHT=320 ALT="LIFAN SMILY" ALIGN="left" USEMAP="#img_map">

<MAP NAME="img_map">

<AREA SHAPE="rect" COORDS="660, 156, 908, 177" HREF="http://lifan.dp.ua/avtomobili/lifan-smily/nadezhnost-bezopastnost" TITLE="НАДЕЖНОСТЬ & БЕЗОПАСТНОСТЬ">

<AREA SHAPE="rect" COORDS="659, 299, 909, 320" HREF="http://lifan.dp.ua/avtomobili/lifan-smily/nadezhnost-bezopastnost" TITLE="СТАБИЛЬНОЕ ВОЖДЕНИЕ">

<AREA SHAPE="rect" COORDS="658, 271, 847, 292" HREF="http://lifan.dp.ua/avtomobili/lifan-smily/nadezhnost-bezopastnost" TITLE="ПОВЫШЕННАЯ МОЩНОСТЬ">

<AREA SHAPE="rect" COORDS="662, 244, 947, 265" HREF="http://lifan.dp.ua/avtomobili/lifan-smily/nadezhnost-bezopastnost" TITLE="ТЕХНИЧЕСКИЕ УСОВЕРШЕНСТВОВАНИЯ">

<AREA SHAPE="rect" COORDS="659, 215, 859, 236" HREF="http://lifan.dp.ua/avtomobili/lifan-smily/nadezhnost-bezopastnost" TITLE=" КОМПЛЕКТАЦИИ И ЦЕНЫ">

<AREA SHAPE="rect" COORDS="661, 187, 849, 208" HREF="http://lifan.dp.ua/avtomobili/lifan-smily/nadezhnost-bezopastnost" TITLE="ТЕХНИЧЕСКИЕ ХАРАКТЕРИСТИКИ">

Правильно писать "безопасность" (без т).

Чтобы на картинке менялся шрифт, надо делать так называемый rollover - вы рисуете две картинки с разными шрифтами, разрезаете их на куски, а куски потом при наведении мышки меняются джаваскриптом. Такая штука есть, кажется, в Dreamweaver.

Спасибо за исправленную ошибку! Бывает :)

А на счет изменения шрифта, буду разбираться. Может кто готовый код подкинет, вроде этого

<a href="ССЫЛКА"><img src='простая картинка без наведения'

onmouseover="this.src='картинка при наведение'"

onmouseout="this.src='простая картинка без наведения'" border=0>

Здесь проблема решается при наведении на весь рисунок. А мне нужно - при наведении на ссылку с MAP

Надо разрезать картинку на куски, которые собраны в таблицу - выглядит как единая картинка, хотя в реальности она собрана из кусочков.

Если кусков картинки немного можно еще использовать псевдокласс :hover

-разрезать картинку на куски,

-каждый кусок сделать ссылкой,

-картинки положить фоном у ссылки.

-каждому куску придется присвоить свой класс,

-в стилях css прописать изменение фона у ссылки по наведению для этих классов.

Все сделал, только немного иначе. Отдельно код с рисунком (зеленый цвет) работает, а в связке с кодом (который выводит картинку на определенные страницы) - не работает. Ошибка при вставке кода с рисунком. Где может быть ошибка. Привожу код page.php

<?php get_header(); ?>

<?php if ( (is_page ('118')) ) {echo '

<table id="Table_01" width="967" height="321" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7">
<img src="/images/0_01.gif" width="967" height="131" alt=""></td>
</tr>
<tr>
<td rowspan="7">
<img src="/images/0_02.gif" width="662" height="189" alt=""></td>

<td colspan="2">

<a href="http://lifan.dp.ua/wp-content/uploads/2011/05/0-1.jpg">

<img src='http://lifan.dp.ua/images/0_03.gif'
onmouseover="this.src='http://lifan.dp.ua/images/0_031.gif'"
onmouseout="this.src='http://lifan.dp.ua/images/0_03.gif'"></a></td>


<td colspan="4">
<img src="/images/0_04.gif" width="119" height="18" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="/images/0_05.gif" width="233" height="29" alt=""></td>
<td colspan="3" rowspan="3">
<img src="/images/0_06.gif" width="72" height="92" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="/images/0_07.gif" width="233" height="30" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="/images/0_08.gif" width="233" height="33" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="/images/0_09.gif" width="272" height="30" alt=""></td>
<td rowspan="3">
<img src="/images/0_10.gif" width="33" height="79" alt=""></td>
</tr>
<tr>
<td>
<img src="/images/0_11.gif" width="181" height="24" alt=""></td>
<td colspan="4">
<img src="/images/0_12.gif" width="91" height="24" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="/images/0_13.gif" width="238" height="25" alt=""></td>
<td>
<img src="/images/0_14.gif" width="34" height="25" alt=""></td>
</tr>
<tr>
<td>
<img src="/images/разделитель.gif" width="662" height="1" alt=""></td>
<td>
<img src="/images/разделитель.gif" width="181" height="1" alt=""></td>
<td>
<img src="/images/разделитель.gif" width="5" height="1" alt=""></td>
<td>
<img src="/images/разделитель.gif" width="47" height="1" alt=""></td>
<td>
<img src="/images/разделитель.gif" width="5" height="1" alt=""></td>
<td>
<img src="/images/разделитель.gif" width="34" height="1" alt=""></td>
<td>
<img src="/images/разделитель.gif" width="33" height="1" alt=""></td>
</tr>
</table>

';} ?>

<?php if ( (is_page ('181')) ) {echo '

<img border="0" src="http://lifan.dp.ua/wp-content/uploads/2011/05/0.jpg" width="967" height="320">

';} ?>

<?php if ( (is_page ('183')) ) {echo '

<img border="0" src="http://lifan.dp.ua/wp-content/uploads/2011/05/0.jpg" width="967" height="320">

';} ?>

<?php if ( (is_page ('185')) ) {echo '

<img border="0" src="http://lifan.dp.ua/wp-content/uploads/2011/05/0.jpg" width="967" height="320">

';} ?>

<?php if ( (is_page ('187')) ) {echo '

<img border="0" src="http://lifan.dp.ua/wp-content/uploads/2011/05/0.jpg" width="967" height="320">

';} ?>

<?php if ( (is_page ('189')) ) {echo '

<img border="0" src="http://lifan.dp.ua/wp-content/uploads/2011/05/0.jpg" width="967" height="320">

';} ?>

<?php if ( (is_page ('191')) ) {echo '

<img border="0" src="http://lifan.dp.ua/wp-content/uploads/2011/05/0.jpg" width="967" height="320">

';} ?>

<?php if ( (is_page ('193')) ) {echo '

<img border="0" src="http://lifan.dp.ua/wp-content/uploads/2011/05/0.jpg" width="967" height="320">

';} ?>

<?php if ( (is_page ('120')) ) {echo '

<img border="0" src="http://lifan.dp.ua/wp-content/uploads/2011/05/520-header1.jpg" width="967" height="320">

';} ?>

<?php if ( (is_page ('122')) ) {echo '

<img border="0" src="http://lifan.dp.ua/wp-content/uploads/2011/05/520i-header.jpg" width="967" height="320">

';} ?>

<?php if ( (is_page ('124')) ) {echo '

<img border="0" src="http://lifan.dp.ua/wp-content/uploads/2011/05/620-header2.jpg" width="967" height="320">

';} ?>

<!-- start content -->

<div id="content">

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class="post" id="post-<?php the_ID(); ?>">

<h1 class="title"><?php the_title(); ?></h1>

<div class="entry">

<?php the_content('<p class="serif">Читать полностью &raquo;</p>'); ?>

<?php wp_link_pages(array('before' => '<p><strong>Страницы:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

</div>

</div>

<?php endwhile; endif; ?>

<?php edit_post_link('Править', '<p>', '</p>'); ?>

</div>

<!-- end content -->

<?php get_footer(); ?>

ну и кидайте onmouseover в map?

скрипт тут нафиг не нужен 😂 просто определите класс (например div.image c картинкой в background и её размерами) и его псевдокласс div.image:hover с другой background-image...

Приведите, пожалуйста, пример, который бы я мог вставить в код