Original: http://www.frankmanno.com/ideas/css-imagemap/

����� ������ �� CSS

���� �������� ������� ����� ������, ������� ������� � ��������� ��������� �� �������� CSS � HTML. � ������� ��������� Javascript (�������� ��������� ������� ���������� ��� ���������), �� ����� � � �����, ��������� ���������� � ���������, ����� JS �������, �� �SS ���������� ���������� (����� ����� ��������).

����������, ��� ���� ������� ���� ������������ � ���� �����, ������� � �������� �� ����� ����� ��������, Scribbling.net. Ÿ ������ ��� ������ ���������, �� ��� �� ��� �������� ������� ���-�� ������� ��� ������ � �����, �� ��� ���� ������������ ������ ���� ���� CSS.

�����, � ����������� �� ���-���� The Daily Kryogenix (������ �� ������, ��������� � ����� �����), �� ������� � ����� ����� ������, � ������� �������������� ��������� DHTML, � ����� ��� <title> ��� ����������� ������� ����� �������. � ��� ��, �� �������� � ��� ��������� Javascript/DHTML.

� �����, � ����� ��������� ����� ���������� ������ ���� ������� � ��������� �� ������� ����������� (<d1></d1>).

����� ���������� ������ �������� ��� ���������� ��� ������� ����������� � ����� ����� �����������, � ����� ������������ ������� background position � �SS, ������� ���� ����������� ������������ ����������� � ����� �����������. ���� �������� ������ :hover � CSS (� ������ ������ �� ������������� � ���� <a>, ������� ������ � ������ ���� <dd>), �� ������� ����� � ������ ���������� ����������� �� ������ ��� �������.

��� ������������ ����� ������ � Photoshop. ��� ����� �� ��������, ����� ������� �� 3� ����� ������ � ���� �� �����������, ������ �� ������� ����� ���� ����������. ������ ���������� ����� ������� � ��������, � ������� � ��������� ����������� �������� ������� (��� ���������� ����� ������������). ���������, ��� ������ ������ ���� �������� �� ������ � ������� �� ���� �����������. ������� ������ ���������� ����������� � ������������ ������� ��������� (����� ��� �������, ������� � ������� �� �����). �� ��������� ������������ ���� ���������, ������� ����������� ��������� ���� ��������� �� ��������� ����� ������ � �� �� �����������.

����� ��������, ��� ���� ������� �������� � ������� ���������� �������� �������� ����� ������� � ��� ������������-������ (<dt></dt>) � ����� ������, � ������ ���� �������� � ���� ������������-�������� (<dd></dd>). ���� CSS �������� ������������-������ (������� ������������ ������ � ������, ���� CSS ����������), � ����� �����������-�������� � ���������� �������� ����������� (� ���� ������, �������� ��������� ����� ������� ��� ����� ������), � ������� ��������� � ���������� ��������.

��� ����� ������ ����������������. ��� <img>, ������� ���������� ������ ��� ����� � ����� ������, ����� ������� ��� ������������� CSS. � ���� �SS ��������, ������ ����� ������ ��� ����������� �� ����� ������������, ��������� ��� �������� ������ �������� background � CSS. ����� �� ��� � ������ �����������, ������ ��� ����� ����� ���� �������� ��� �����������. ���� � ��� ����������� ���������� Web Developer �� ���-�������� Firefox, ���������� ��������� �����. ��� �� ����� ���������� ������ ����������������.

���� �������� ������ ���� (��������� �� ������ ��� ������� ����������� ���� CSS � XHTML)

CSS:

dd#monitorDef{ top: 65px; left: 114px; }

dd#monitorDef a{ position: absolute; width: 73px; height: 69px; text-decoration: none; }

dd#monitorDef a span{ display: none; }

dd#monitorDef a:hover{ position: absolute; background: transparent url(office.jpg) -109px -317px no-repeat; top: -10px; left: -5px; }

 

dd#monitorDef a:hover span{

display: block;

text-indent: 0;

vertical-align: top;

color: #000;

background-color: #F4F4F4;

font-weight: bold;

position: absolute;

border: 1px solid #BCBCBC;

bottom: 100%;

margin: 0;

padding: 5px;

width: 250%;

}

HTML:

<dl id="officeMap">
 <dt id="monitor">1. Monitor</dt>
 <dd id="monitorDef"><a href="#"><span>Here's my 17" Monitor.I wish I had an LCD!</span></a></dd>
 <dt id="phone">2. Phone</dt>
 <dd id="phoneDef"><a href="#"><span>Does this thing ever stop ringing?</span></a></dd>
 <dt id="case">3. PC Case</dt>
 <dd id="caseDef"><a href="#"><span>This is my crazy Linux box! Gotta love that Linux...</span></a></dd>
 <dt id="notebook">4. IBM ThinkPad</dt>
 <dd id="notebookDef"><a href="#"><span>Here's my Linux notebook.Some crazy coding going on.</span></a></dd>
 <dt id="floppy">5. External Floppy Drive</dt>
 <dd id="floppyDef"><a href="#"><span>Floppy Drive.Ancient... I know!</span></a></dd>
</dl>

 

�������� ��� � �� ��������� �������, �� �� ������� ����, �� �� ����� ��������� ������� ����������� ����. ��� ����� ������������ ����, ������������ ������, � ������� � ��������� ��������� �. � ���������, ������ ��������� ������������� CSS, � �� ���� ������ ������������� ����������� ����������������, ����� ��� � ������� �����.

����� �� ������� ������, � ������� ������������ � CSS � Javascript. ��������, � ������� ��� �������� �����������, ����������� � ���, ��� ����� CSS ��������, Javascript �������� ��������. ������ �����, ���-�� �� ��� � ������� �����������. ���� �� ������, ��� ��� ���������, ����� ��� �����. � ����� ����, ����� ��� ����������.

� ����� ���������� ��� ���� ����� ������ �� ���� CSS, � �������� ��� ��������-���� �������. �� ����� ����, ��-�� ��������� ����������� (��� ��� �������������� ������ ������ :hover � ���� <a>), ��� ��� ���� �� ���������� �� ����� ����������.

���� � ��� �������� �������, �����������, ������ ��� �� frankmanno@gmail.com  ��� ���������� ����������� �� ���� �����.

��� ������� ���� ������� �������������� �� Safari, Firefox (Mac/Win), IE6/Win, � Opera 7.5/Mac. �� �����-�� �������, ������ Javascript �������� �� IE5/Mac, � ������ �� �� Javascript �� ��������.






Most popular articles:


  • Photo-news blog

  • Clipart Library

  • Keywords base