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

PasSuper · February 4, 2010

Здравствуйте! Помогите пожалуйста, горят сроки!

Задача: при наведении на каждую из ссылок должна вылетать картинка.

Проблема в том, что картинка всегда вылетает в одном месте, а нужно, чтобы у каждой ссылки

Вот исходный код:

<html>
<head>
<title>Полимер-профиль</title>
<link href="style.css" rel="stylesheet" type="text/css" />

  <script type="text/javascript">
   function hiddenLayer() {
	document.getElementById("descr").style.visibility = "hidden";
   } 
   function showLayer() {
	document.getElementById("descr").style.visibility = "visible";
   }
  </script>

</head>

<body bgcolor = "#000000" text = "#ffffff">

	<div id="headerPan"><img src="images/title.jpg" width="100%" ></div>
 	<div id="mainBody"> 
		<div id="descr"><img src="images/marker.jpg" width="30" ></div>
<h2><a href="#" onMouseOver="showLayer()" onMouseOut="hiddenLayer()">  Продажа ручного электроинструмента и расходных материалов</a></h2> <br>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

	 <div id="mainBodyBlock">
	<div id="descr"><img src="images/marker.jpg" width="30" ></div>
<h2><a href="#" onMouseOver="showLayer()" onMouseOut="hiddenLayer()"> Продажа промышленного оборудования</a></h2><br>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> 

	<div id="mainBodyBlock"> 
	<h2><a href="#">Сервисный центр по обслуживанию и ремонту электро и бензоинструмента</a></h2> <br>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> 

	<div id="mainBodyBlock"> 
	<h2><a href="#">Порошковая покраска</a></h2> <br>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> 
	</div>


</body>
</html>

CSS файл:

/* CSS Document */
.bg{ margin:0px auto 0; background:url(images/bg-top1.gif) repeat-x; overflow:hidden; width:100%; height: 100%; font: 11pt arial; }
.gr { margin: 10px; text-align: center; }
h2{padding-left: 450px; padding-top: 24px; margin:14 0 0 0px;font:24px arial; color: #83c2f1;}
p{padding-left: 450px;  margin:0 0 0 0px;font:11px arial; text-align: justify; }
a {
	color: #c6c6c8;
	text-decoration: none;
   }
a:visited {
	color: #ececec; /* Цвет посещенных ссылок */
	text-decoration: none;
   }
a:hover {
	color: #ececec; 
	text-decoration: none;

  } 
/*————————-picture——————————-*/
#headerPan{
	align: right; margin:90 70 0 20; width: 400px; position: absolute;
	}
/*—————————right side——————————*/
#mainBody{
	width:900px; margin:0px auto 0 0;  top: 100px; position: relative; z-index: 1; display:block; 
	}
#mainBodyBlock{
	width:100%; margin:15px auto 0 auto;  position: absolute; z-index: 1; display:block;
	}
 #descr {
	position: absolute;
	visibility: hidden;
	margin:30 0 0 410; 
	z-index: 2;
   }

Пока прописала только для 2-х ссылок, но здесь уже понятна проблема. Помогите пожалуйста, буду очень благодарна!

Justnewone · February 4, 2010

Положить картинки внутри соответствующих ссылок

CSS, схематично

A{
position:relative
}

A IMG{
position:absolute;
display:none;
}

A:hover IMG{
display:block;
}

А вообще, для вопросов, по которым сроки горят у нас есть коммерческий раздел.

PasSuper · February 5, 2010

не понимаю.... у меня же в скрипте прописано, по функциям... можно поподробнее?

Сделала вот так:

/* CSS Document */
.bg{ margin:0px auto 0; background:url(images/bg-top1.gif) repeat-x; overflow:hidden; width:100%; height: 100%; font: 11pt arial; }
.gr { margin: 10px; text-align: center; }
h2{padding-left: 450px; padding-top: 24px; margin:14 0 0 0px;font:24px arial; color: #83c2f1;}
p{padding-left: 450px;  margin:0 0 0 0px;font:11px arial; text-align: justify; }
a {
	color: #c6c6c8;
	text-decoration: none;
	position: relative;
   }
a img{
	position: absolute;
	display:none;
}
a:visited {
	color: #ececec; /* Цвет посещенных ссылок */
	text-decoration: none;
   }
a:hover {
	color: #ececec; 
	text-decoration: none;

  } 
a:hover IMG{
	 display:block;
	 background:url(images/marker.jpg) no-repeat;
}
/*————————-picture——————————-*/
#headerPan{
	align: right; margin:90 70 0 20; width: 400px; position: absolute;
	}
/*—————————right side——————————*/
#mainBody{
	width:900px; margin:0px auto 0 0;  top: 100px; position: relative; z-index: 1; display:block; 
	}
#mainBodyBlock{
	width:100%; margin:15px auto 0 auto;  position: absolute; z-index: 1; display:block;
	}
 #descr {
	position: absolute;
	visibility: hidden;
	margin:30 0 0 410; 
	z-index: 2;
   }

а код поменяла примерно на вот это:

<div id="mainBodyBlock"> 
	<h2><a href="#"><img src="images/marker.jpg" width="30" >Сервисный центр по обслуживанию и ремонту электро и бензоинструмента</a></h2> <br>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

но так не работает. Рисунок выскакивает поверх ссылки и в белом обрамлении. Наверное, я что-то не так делаю...

Edited February 5, 2010 by PasSuper

PasSuper · February 10, 2010

Однако, дельная здесь помощь.... Неужели это настолько сложный вопрос?

ПОМОГИТЕ, ПОЖАЛУЙСТА! я нигде не могу это найти

Justnewone · February 10, 2010

Однако, дельная здесь помощь.... Неужели это настолько сложный вопрос?
ПОМОГИТЕ, ПОЖАЛУЙСТА! я нигде не могу это найти

Дареному коню в зубы не смотрят.

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

PasSuper · February 10, 2010

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

Я НЕ МОГУ НАЙТИ ТУ ЖЕ ПРОБЛЕМУ

уже переписала 100 раз код и список попробовала и так, и сяк... Всё равно картинка выскакивает всегда на одном и том же месте

Вашим кодом сделала так:

CSS

ul {
position: relative;
width: 900px;
list-style: none;
}
li {
margin: 30px;
padding-left: 5px;
}
a {
color: #c6c6c8;
 text-decoration: none;
display: block;
}
a img {
display: none;
position: absolute;
top: 20;
border: 0;
right: 430px;
}
a:hover img {
display: block;
}

HTML

<ul>
	<li><h2><a href="#"><img src="images/marker.jpg" />Продажа промышленного оборудования</a> 

</h2><br>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod 

tincidunt ut lacreet dolore magna aliguam erat volutpat. 
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 

consequat.</p> </li>
	<li><h2><a href="#"><img src="images/marker.jpg" />Сервисный центр по обслуживанию и ремонту 

электро и бензоинструмента</a> </h2><br>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod 

tincidunt ut lacreet dolore magna aliguam erat volutpat. 
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 

consequat.</p> </li>
	</ul>

НО ЭТО НЕ РАБОТАЕТ

всё равно картинка в одном и том же месте

Justnewone · February 10, 2010

Вам не хватает 1 единственной строчки, а все потому что (повторяет монотонно) ищете решение а не знание. Подсказка, зачем нужен релейтив? во всех его инкарнациях.

PasSuper · February 10, 2010

Вам не хватает 1 единственной строчки, а все потому что (повторяет монотонно) ищете решение а не знание. Подсказка, зачем нужен релейтив? во всех его инкарнациях.

благодарна, конечно, за почти отцовскую заботу о моих знаниях:-)

я так понимаю, что у a img{} позиция должна быть рэлейтив? правильно мыслю?

только в Вашей подсказке он absolute

Edited February 10, 2010 by PasSuper

Justnewone · February 10, 2010

благодарна, конечно, за почти отцовскую заботу о моих знаниях:-)
я так понимаю, что у a img{} позиция должна быть рэлейтив? правильно мыслю?
только в Вашей подсказке он absolute

неправильно мыслите.

PasSuper · February 10, 2010

неправильно мыслите.

УРАААААААААААААААААА!!!!!!!!!!!!!!!!!!!!!

всё поняла)))) правда одной строчки не хватало!

СПАСИБО ВАМ ОГРОМНОЕ))))

Sign In

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

Question

PasSuper

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Justnewone

Link to comment

Share on other sites

PasSuper

Link to comment

Share on other sites

PasSuper

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

PasSuper

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

PasSuper

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

PasSuper

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information