 |
|
Модераторы: Sardar, Aliance |
 
|
|
Найти элемент и присвоить ссылку 
| Stephenlab |
|
|||
|
Новичок Профиль Группа: Участник Сообщений: 9 Регистрация: 20.11.2010 Репутация: нет Всего: нет |
Есть картинка, состоящая из квадратов 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 ? Это сообщение отредактировал(а) Stephenlab - 20.11.2010, 11:10 |
|||
|
||||
Загрузка ...
| bars80080 |
|
|||
 прапор творюет  Награды: 1 Профиль Группа: Завсегдатай Сообщений: 12022 Регистрация: 5.12.2007 Где: Königsberg Репутация: 15 Всего: 315 |
ничего не понятно. у вас квадраты - это пикселы на картинке? и как вы собрались их считать?
|
|||
|
||||
| Stephenlab |
|
|||
|
Новичок Профиль Группа: Участник Сообщений: 9 Регистрация: 20.11.2010 Репутация: нет Всего: нет |
да, квадраты это пиксели 2х2, проблема в том что картинка цельная, там много таких квадратов, а фон 1 цвета отличного от квадратов
ну вот я и хотел спросить если есть такой скрипт который ищет к примеру квадрат 2х2 желтого цвета и присваивает ему id но мне кажется что это нереально, поэтому вручную создаю горячую область и присваиваю ей ссылку, проблема в том что не отображается у меня картинка при наведении в IE, а в опере вообще ничего не отображается. В чем может быть проблема? Это сообщение отредактировал(а) Stephenlab - 20.11.2010, 11:34 |
|||
|
||||
| Stephenlab |
|
|||
|
Новичок Профиль Группа: Участник Сообщений: 9 Регистрация: 20.11.2010 Репутация: нет Всего: нет |
есть похожая вещь
http://sstrudeau.com/jquery-dropper/demo/index.html пощелчку мыши на картинку вверху в квадрате выдается цвет если к примеру в скрипте указать только на 1 цвет, и если он попадает в область то этот квадрат становится ссылкой (имеется ввиду мой случай) это конечно сложно, поэтому можно этим не заниматься помогите решить проблему почему не отображается картинка при наведении на ссылку Это сообщение отредактировал(а) Stephenlab - 20.11.2010, 11:53 |
|||
|
||||
| ksnk |
|
||||
 прохожий Профиль Группа: Комодератор Сообщений: 6855 Регистрация: 13.4.2007 Где: СПб Репутация: 84 Всего: 386 |
Stephenlab, Насчет получения цвета картинки по координатам - все достаточно грустно, хотя и не так, как может показаться.
в принципе, картинку можно выковырять, поместить ее в объект canvas и явно проверить в ней цвета по координатам. Некоторый геморой, и , возможно, грусть, возникнет при прикручивании ExplorerCanvas для IE- броузеров. Впрочем, это не так смертельно. Пример какими средствами можно пользоваться для этого в хром-мозилах-операх. В IE средства те-же, но слова немного другие  Добавлено через 7 минут и 15 секунд
В каком месте не отображается картинка? В IE6-7-8? и не будет. -------------------- Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! |
||||
|
|||||
| Stephenlab |
|
|||
|
Новичок Профиль Группа: Участник Сообщений: 9 Регистрация: 20.11.2010 Репутация: нет Всего: нет |
ksnk, Спасибо, сейчас попробую разобраться в скрипте, хотя эта страничка у меня не отображается в обоих браузерах
Добавлено через 14 минут и 38 секунд ksnk, IE8 не отображается картинка при наведении на горячую область, ссылка появляется а картинка нет - там пустое окошечко высвечивается, в котором по идее должна быть картинка сайт с красными глазами не выдает картинку, пытаюсь подгрузить вручную - ничего не выходить, но ход ваших мыслей понял , надо бы еще разобраться что к чему ))) |
|||
|
||||
| ksnk |
|
|||
|
прохожий Профиль Группа: Комодератор Сообщений: 6855 Регистрация: 13.4.2007 Где: СПб Репутация: 84 Всего: 386 |
Stephenlab, В IE показываться не будет, разве что в IE9.
Судя по тому, что я успел узнать - это принципиально, так как ExplorerСanvas использует встроенный в IE язык VML для эмуляции canvas'а, а в этом языке просто физически нет возможности узнать цвет отрисованной конструкции, так что это вероятнее всего не лечится :( -------------------- Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! |
|||
|
||||
| Stephenlab |
|
|||
|
Новичок Профиль Группа: Участник Сообщений: 9 Регистрация: 20.11.2010 Репутация: нет Всего: нет |
ksnk, спасибо
|
|||
|
||||
| ksnk |
|
|||
|
прохожий Профиль Группа: Комодератор Сообщений: 6855 Регистрация: 13.4.2007 Где: СПб Репутация: 84 Всего: 386 |
Вчитался в первый пост... А что за задача-то решается? если просто какой-то переход по схеме на картинке, то слишком маленькие элементы - 2x2 - легко промазать мышом, а особенно пальцем на сенсорных экранах.
В принципе - идея с map'ом должна бы сработать. хотя сам map для переходов по цветовой схеме лучше генерить на сервере, один раз открыть картинку, честно пробежаться по всем пикселям и нарисовать карту цветов-ссылок. Потом подключать получившийся map к нужной картинке. На сами area вполне навешиваются события onmouseover, так что особых проблем быть не должно... -------------------- Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! |
|||
|
||||
| Stephenlab |
|
|||
|
Новичок Профиль Группа: Участник Сообщений: 9 Регистрация: 20.11.2010 Репутация: нет Всего: нет |
ksnk, квадратов 2х2 разных цыетов много и они складываются в картинку, как пазл
между ними есть промежутки при наведении можно сделать чтоб квадрат немного увеличивался и над ним появлялась картинка и ссылка щас подумал, можно сделать 1 такой квадрат отдельно и вставлять по координатам поверх тех что есть на фоновой картинке но никак не пойму почему картинка поверх квадрата не отображается, ссылка есть и отображается пустое окно там где по идее должна отображаться картинка |
|||
|
||||
| Stephenlab |
|
|||
|
Новичок Профиль Группа: Участник Сообщений: 9 Регистрация: 20.11.2010 Репутация: нет Всего: нет |
С пикселями разобрался. Создал CSS файл который при наведении на пиксель выводит картинку с сылкой. Пиксели раскидал на бекграунде, прописал каждому определенные координаты таким способом:
<a href="http://"> <div><img src="ПУТЬ К ФАЙЛУ\blue-px.jpg" style="position:absolute; top:540px; left:357px;"/><img src="КАРТИНКА ПРИ НАВЕДЕНИИ\.gif" class="prev" style="position:absolute; top:479px; left:256px;"/></div></a> <a href="http://"> <div><img src="ПУТЬ К ФАЙЛУ\green-px.jpg" style="position:absolute; top:545px; left:357px;"/><img src="КАРТИНКА ПРИ НАВЕДЕНИИ\.gif" class="prev" style="position:absolute; top:484px; left:256px;"/></div></a> Проблема в том, что у меня разрешение монитора 1440х900, если смотреть страницу на большем мониторе, эти пиксели сдвигаются. И еще нужно создать вверху строку, где будут располагаться название, поиск по сайту и другие элементы. Как лучше сделать, создать несколько таблиц через <table > <tr> <td ></td> </tr> </table > отдельно для верхней шапки и для основного бекграунда с пикселями? ИЛИ воспользоваться скриптом z-index который создаст слой 1 для бекграунда, слой 2 поверх бекграунда с шапкой, чтобы все пиксели оставались на своих местах и не сдигались по отношению к шапке или других столбцов и строк? С обоими скриптами знаком, просто хочется сделать как лучше и чтоб целая картинка отображалась корректно на разных мониторах. |
|||
|
||||
|
|
| Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию. |
| 1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей) | |
| 0 Пользователей: | |
| « Предыдущая тема | JavaScript: Общие вопросы | Следующая тема » |
[ Время генерации скрипта: 0.1609 ] [ Использовано запросов: 21 ] [ GZIP включён ]
Реклама на сайте Информационное спонсорство
|
|
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности Powered by Invision Power Board(R) 1.3 © 2003 IPS, Inc. |