Помогите с ссылкой в background

[Maxxx]

Доброго времени суток!

Не могу немного сообразить как мне сделать ссылку в background

Имеем код

<div style='background:url(/images/{math equation='rand(1,4)'}.jpg) no-repeat' class='image'>

Каждый раз при заходе на сайт у меня генерируется разная картинка. Вот подскажите, как мне сделать так, чтобы при выборе какой-то либо картинке на ней можно было сделать ссылку и на неё нанести карту.

Вот пример картинки

Т.е. там где одна цена - на одну ссылку, там где вторая цена на вторую ссылку.

[klierik]

1.на текущий блок вешай position:relative;

ну а поверх клади <a> и позиционируй его абсолютом как тебе надобно

2. читай про http://htmlbook.ru/html/map

[Maxxx]

1.на текущий блок вешай position:relative;

ну а поверх клади <a> и позиционируй его абсолютом как тебе надобно

2. читай про http://htmlbook.ru/html/map

Про карту я сообразил, а вот про как повесить на текущий блок нет. Как задать условие что вот при картинки 4 такая карта, при картинке 2 другая карта.

Я так понял что без JS уже не обойтись тут...

Edited February 2, 2012 by Maxxx

[bob_24]

Может проще ссылки отделить от картинки? Картинку сделать фоном, а кнопки вырезать и сделать как простые ссылки, ну и абсолютно подвигать.

[klierik]

бери обычный jQuery слайдер с поддержкой контента и крути хоть миллион картинок.

к примеру http://jquery.malsup.com/cycle/

[Switch74]

здесь думаю проще обрабатывать на сервере выбор нужной цены, картинок и ссылок

или js, но при этом нужно загрузить все цены, пути к картинкам и ссылки

Edited February 2, 2012 by Switch74

[Maxxx]

В общем вот такой сценарий написали мне

Это в HEAD вставляется

<script type="text/javascript">
  window.onload = function(){
    img = Math.ceil(Math.random()*4);
    div = document.getElementById("rnd_image");
    div.style.background = "white url(/images/"+img+".jpg) no-repeat";
    if(img == 4){
      div.innerHTML = '<a id="link_1" href="/#"></a><a id="link_2" href="/#"></a>' + div.innerHTML;
    }
  }
</script>
<style>
#link_1{
  position:absolute;left:160px;top:50px;display:block;width:150px;height:142px;
}
#link_2{
  position:absolute;left:555px;top:50px;display:block;width:150px;height:142px;
}
</style>

А это за место той строчки...

<div class="image" id="rnd_image">

Но не срабатывает... не показывает вообще ни чего, в чём косяк?

Edited February 2, 2012 by Maxxx

[Switch74]

наверно спрашивать это лучше у тех, кто писал

да и ссылки у тебя здесь не особо зависят от картинок

скажи где у тебя хранится информация о связи ссылки с картинкой и или хотя бы какая она

Edited February 2, 2012 by Switch74

[Maxxx]

наверно спрашивать это лучше у тех, кто писал

да и ссылки у тебя здесь не особо зависят от картинок

скажи где у тебя хранится информация о связи ссылки с картинкой и или хотя бы какая она

в отдельном файле head

[Switch74]

и как она выглядит?

могу предложить как вариант массив

или

можно использовать заранее зарезервированные адреса, например

ссылке /link/1/ соответствует /images/1.jpg

ссылке /link/2/ соответствует /images/2.jpg

если первый вариант, то можно сделать так

+: связи картинки и ссылок не зависят друг от друга

-: громоздкий вариант

<style>
#rnd{position:relative;width:400px;height:150px; background:#ccc;}
#rnd img{position:relative;width:400px;height:150px;}
#rnd a.link1{display:block;position:absolute;top:50px;left:100px;width:50px;height:50px;	border:1px solid #0b0;}
#rnd a.link2{display:block;position:absolute;top:50px;left:250px;width:50px;height:50px;	border:1px solid #00b;}
</style>
<div id="rnd">

</div>
<script>
var nn = {
	1:{
		'img':'/images/1.jpg',
		'link':{
			1:'/link/1/',
			2:'/link/2/'
		}
	},
	2:{
		'img':'/images/2.jpg',
		'link':{
			1:'/link/3/',
			2:'/link/4/'
		}
	},
	3:{
		'img':'/images/3.jpg',
		'link':{
			1:'/link/5/',
			2:'/link/6/'
		}
	},
	4:{
		'img':'/images/4.jpg',
		'link':{
			1:'/link/7/',
			2:'/link/8/'
		}
	}
};
function rnd()
{
	var rnd = document.getElementById('rnd');
	var n = Math.ceil(Math.random()*4);
	rnd.innerHTML = '<img src="'+nn[n]['img']+'"/><a href="'+ nn[n]['link'][1] +'" class=\"link1\"></a><a href="'+ nn[n]['link'][2] +'" class=\"link2\"></a>';
}
window.onload = rnd();
</script>

если второй вариант, то достаточно сделать так

+:компактно и удобно

-:зависимость ссылки от картинки

<style>
#rnd{position:relative;width:400px;height:150px; background:#ccc;}
#rnd img{position:relative;width:400px;height:150px;}
#rnd a.link1{display:block;position:absolute;top:50px;left:100px;width:50px;height:50px;	border:1px solid #0b0;}
#rnd a.link2{display:block;position:absolute;top:50px;left:250px;width:50px;height:50px;	border:1px solid #00b;}
</style>
<div id="rnd">

</div>
<script>
function rnd()
{
	var rnd = document.getElementById('rnd');
	var n = Math.ceil(Math.random()*4);
	rnd.innerHTML = '<img src="/images/'+n+'.jpg"/><a href="/link/'+(n*2-1)+'/" class=\"link1\"></a><a href="/link/'+(n*2)+'/" class=\"link2\"></a>';
}
window.onload = rnd();
</script>

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

Вместо абсолютнопозиционированных ссылок можно использовать карту, в первом варианте легко можно добавить и расположение этих ссылок и размер если вдруг на разных картинка зоны клика в разных местах.

Фантазия вам в помощь и у вас получится

Edited February 2, 2012 by Switch74