[Работа] SVG-спрайт + jQuery. Доработать скрипт

Sunday

Sunday

Cōgitō ergō sum
Регистрация
13 Дек 2009
Сообщения
823
Реакции
342
Вопрос решён. Спасибо за работу Для просмотра ссылки Войди или Зарегистрируйся. Можно к нему обращаться по вопросам jQuery. :ay:

Есть рабочий скрипт, где по клику на кнопку меняется иконка путём изменения класса у элемента. Этот мехнизм нужно переделать.

Есть готовый файл svg-спрайта, к которому можно обратиться оп ID, для получения нужной иконки.
Как обращение к SVG выглядит в HTML:
HTML: 
<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#play"></use></svg>
Требуется по клику обратиться к другому ID этого файла для получения другой иконки и её отображения на странице вместо текущей.
По второму клику - обратное действие.

Есть еще нюансы. Более подробно напишу исполнителю.

Предложения в личку.
 
Последнее редактирование:
  • Заблокирован
  • #2
Так в чем проблема то? Замени значение на свое здесь xlink:href="#play", или я что то не так понимаю?

svg иконка прописана в текстовом варианте? или в графическом?

Вот тебе редактор для работы с svg файлами, там и самому все можно сделать:
Скрытое содержимое для пользователя(ей): Sunday


А если условие подмены нужно, то сформируй его через CSS, например через class: hover
 
Последнее редактирование:
dollar1981 написал(а):
Замени значение на свое здесь xlink:href="#play"
Нажмите для раскрытия...
Просто заменить #play на #pause можно, но иконка при этом не меняется. В этом и сложность. Видимо там нужно как-то иначе это делать. Про hover не понял. Мне по клику нужно заменить иконку. А по следующему клику заменить обратно.
Про редактор тоже не понял. Он мне тоже не нужен. рисовать и создавать svg у меня есть в чём.
 
Ссылку хочу увидеть на Ваш сайт, чтобы посмотреть как оно реализовано, тогда смогу помочь.
 
  • Заблокирован
  • #5
Sunday написал(а):
Просто заменить #play на #pause можно, но иконка при этом не меняется. В этом и сложность. Видимо там нужно как-то иначе это делать. Про hover не понял. Мне по клику нужно заменить иконку. А по следующему клику заменить обратно.
Про редактор тоже не понял. Он мне тоже не нужен. рисовать и создавать svg у меня есть в чём.
Нажмите для раскрытия...

Редактор я тебе дал чтобы ты xml структуру своего svg мог редактировать и видеть сразу результат.

Для получения эффекта "смены" изображения воспользуйся вот таким, совсем маленьким скриптом, который необходимо будет поместить в начало странички:
Код: 
<script type="text/javascript">
function l_image (a) {
document.example_img.src=a
}
</script>

В том месте страницы, где будут выводиться ссылки и изображения, которые будут меняться на другие при клике по этим ссылкам, вставь этот код:
Код: 
<table border="0" cellspacing="0" cellpadding="0">
<tr align="center" valign="center">
<td width="350" height="200">
  <a href="javascript:l_image ('image/img_1.png')">Ссылка на изображение №1</a><br>
  <a href="javascript:l_image ('image/img_2.png')">Ссылка на изображение №2</a><br>
  <a href="javascript:l_image ('image/img_3.png')">Ссылка на изображение №3</a><br>
  <a href="javascript:l_image ('image/img_4.png')">Ссылка на изображение №4</a><br>
</td>
<td width="350" height="200">
  <img src="image/img_1.png" name="example_img"
  alt="Картинки для демонстрации работы скрипта смены изображений">
</td>
</tr>
</table>

Ну это как пример. Иконка же имеет ссылку, так вот возьми эту ссылку и примени к ней правило смены иконки.

Или вот еще попроще:
Код: 
<html>
<img SRC="Max-it1.png" onclick=imgchange(this,"Max-it1.png","img1.jpg")>
<script>
  var x=false
  function imgchange(obj,imgX,imgY) {
   if  (x){
   obj.src=imgX
   } else {
   obj.src=imgY
   }
  x=!x
}
</script>
</html>

Или вот без java на html5:
Код: 
<style type="text/css">
    .linktoggler a:target,
    .linktoggler a:last-child {
        display: block;
    }
    .linktoggler a,
    .linktoggler a:target ~ a:last-child {
        display: none
    }
</style>
<div class="linktoggler">
    <a id="i1" href="#i2"><img src="http://t1.gstatic.com/images?q=tbn:e_Btp8weovl5sM:http://kombinator.ru/files/images/%D0%98%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5%2520371_1.jpg" /></a>
    <a id="i2" href="#i3"><img src="http://t0.gstatic.com/images?q=tbn:PAasTfumv6DVTM:http://www.gandex.ru/upl/oboi/u185_7761_morskaya_volna.jpg" /></a>
    <a id="i3" href="#i4"><img src="http://t0.gstatic.com/images?q=tbn:V5QI99DfbCXimM:http://demiart.ru/tutorials/book/5/5.42.jpg" /></a>
    <a id="i4" href="#i1"><img src="http://t3.gstatic.com/images?q=tbn:NnK7XVJb8kEsNM:http://upload.wikimedia.org/wikipedia/commons/1/1b/%D0%98%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5_307.jpg" /></a>
</div>
 
спасибо за старания. Есть уже человек, который этим занимается. Там не всё так просто, как кажется на самом деле.
 
  • Заблокирован
  • #7
Да не за что собственно. Если что обращайтесь.
 
Вопрос решён. Спасибо за работу Для просмотра ссылки Войди или Зарегистрируйся. Можно к нему обращаться по вопросам jQuery. :ay:
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху