Есть картинка, состоящая из квадратов 2х2px разных цветов на белом фоне) и которая является фоном страницы.
Возможно ли чтоб скрипт нашел все квадраты (не белого цвета) пронумеровал их, чтоб потом каждому присвоть ссылки?
Добавлено @ 11:07
Решения так и не нашел, смог сделать только так: создал горячую область map area, при наведении на которую появляется ссылка с картинкой.
создал файл link.css
1 .bulletimagestyle
2 {
3 position: absolute;
4 left: -200px;
5 }
и link.js
01 var bulletimg1=["ПУТЬ К ФАЙЛУ/КАРТИНКА2.jpg", 25, 2, 0]
02
03 var classnameRE=/(^|\s+)ddbullet($|\s+)/i
04 function caloffset(what, offsettype){
05 var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
06 var parentEl=what.offsetParent;
07 while (parentEl!=null){
08 totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
09 parentEl=parentEl.offsetParent;
10 }
11 return totaloffset;
12 }
13 function displaybullet(linkobj){
14 var reltovar=window[linkobj.getAttribute("rel")]
15 bulletobj.setAttribute("src", reltovar[0])
16 bulletobj.style.left=caloffset(linkobj, "left")-reltovar[1]-reltovar[2]+"px"
17 bulletobj.style.top=caloffset(linkobj, "top")-reltovar[3]+"px"
18 bulletobj.style.visibility="visible"
19 }
20 function modifylinks(){
21 bulletobj=document.createElement("img")
22 bulletobj.setAttribute("id", "bulletimage")
23 bulletobj.className="bulletimagestyle"
24 document.body.appendChild(bulletobj)
25 for (i=0; i<document.links.length; i++){
26 if (typeof document.links[i].className=="string" && document.links[i].className.search(classnameRE)!=-1){
27 document.links[i].onmouseover=function(){displaybullet(this)}
28 document.links[i].onmouseout=function(){bulletobj.style.visibility="hidden"}
29 }
30 }
31 }
32 if (window.addEventListener)
33 window.addEventListener("load", modifylinks, false)
34 else if (window.attachEvent)
35 window.attachEvent("onload", modifylinks)
36 else if (document.getElementById || document.all)
37 window.onload=modifylinks
в блокноте.html прописал
01 <html>
02 <head>
03 <title>Untitled</title>
04
05 <link rel="stylesheet" href="ПУТЬ К ФАЙЛУ/link.css" type="text/css" />
06 <script language="JavaScript" type="text/javascript" src="ПУТЬ К ФАЙЛУ/link.js"></script>
07
08 </head>
09
10 <body>
11
12 <MAP NAME="map1">
13 <AREA href="http://...." SHAPE="rect" COORDS="200,200,150,150" class="ddbullet" rel="bulletimg1" >
14 </MAP>
15
16 <IMG src="ПУТЬ К ФАЙЛУ/КАРТИНКА1.jpg" WIDTH="1440" HEIGHT="900" BORDER="0" USEMAP="#map1">
17
18 </body>
19 </html>
КАРТИНКА1 как фон отображается, горячая область есть, и при наведении появляется ссылка.
Но при наведении на ссылку не отображается КАРТИНКА2. Почему? Может не правильно прописал в блокноте.html ? |
)