Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

Помогите написать небольшой скриптик

Обсуждение темы Помогите написать небольшой скриптик в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Люди помогите, надо чтобы при нажатии на ссылку (текст) появлялся снизу блок текста и его можно было потом закрыть. Вобщем чтоб выглядело так ...


Закрытая тема
 
Опции темы
Старый 22.04.2008, 19:04   #1
Люди помогите, надо чтобы при нажатии на ссылку (текст) появлялся снизу блок текста и его можно было потом закрыть. Вобщем чтоб выглядело такsait_vklad_1_3_03.gif а при нажатии на "Чипсы" вот так sait_vklad_1_2_03.gif и чтоб на крестик можно было всё это дело закрыть или повторным нажатием на "Чипсы" =) Сам только изучаю Java script, буду рад любой помощи.
 
Старый 22.04.2008, 19:04
Ссылки
Старый 22.04.2008, 20:50   #2
Вот сам скрипт (в разделе HEAD):

Цитата:
<script language="JavaScript1.2">
<!--

var ns6=document.getElementById&&!document.all?1:0

var head="display:''"
var folder=''

function expandit(curobj){
folder=ns6?curobj.nextSibling.nextSibling.style:do cument.all[curobj.sourceIndex+1].style
if (folder.display=="none")
folder.display=""
else
folder.display="none"
}

//-->
</script>
А вот приминение (это в BODY где вам угодно):

Цитата:
<p style="cursor:hand; text-decoration:underline;" onClick="expandit(this)">ЧИПСЫ</p>
<span style="display:none" style=&{head};>
<img border="0" src="strelka.gif"> ЧИПСЫ - это текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
</span>
Я, правда, када себе делал - малец наворотил его, но вот то, что выше - это как раз то, что вам нужно!

Последний раз редактировалось GLUK; 22.04.2008 в 20:53..
 
Этот пользователь сказал спасибо GLUK за это полезное сообщение:
Nielson (22.04.2008)
Старый 23.04.2008, 02:20   #3
Большое спасибо, вот что получилось...


<html>
<head>
<script language="JavaScript1.2">
var ns6=document.getElementById&&!document.all?1:0
var head="display:''"
var folder=''
function expandit(curobj){
folder=ns6?curobj.nextSibling.nextSibling.style:do cument.all[curobj.sourceIndex+1].style
if (folder.display=="none")
folder.display=""
else
folder.display="none"
}

//-->
</script>
</head>
<body bgcolor="#FFFFFF" topmargin="0" leftmargin="0">
<h3 style="font-family:Arial">Непонятные слова</h3>

<p style="cursor:hand; font-family:Arial; color:#0066FF; line-height:0px" onClick="expandit(this)">Чипсы</p>
<span style="display:none; font-family:Verdana; font-style:italic; font-size:8pt; color:#666666" style=&{head};>
Текст текст текст</br>текст текст текст </br>текст текст текст </br>текст текст текст </br>текст текст текст<br>
<img border="0" src="sait_vklad_1_2_03.gif">
</span>


</body>
</html>

результат можно посмотреть тут http://www.fasass.narod.ru/
Тока вот незнаю как сделать чтоб закрывался блок с текстом на крестик, нет мыслей на эту тему? и ещё желательно чтоб в мозиле при наведении на чипсы появлялась ладошка, как и в ie и для чего нужен стиль который я выделил красным, работает и без него?

Последний раз редактировалось Николай; 23.04.2008 в 02:28..
 
Старый 23.04.2008, 02:33   #4
интересный скрипт, я б его через дивы сделал.
Можно попросить пояснить что делают строки:
никогда таких записей в ява-скрипте не видел

var ns6=document.getElementById&&!document.all?1:0
folder=ns6?curobj.nextSibling.nextSibling.style:do cument.all[curobj.sourceIndex+1].style
 
Старый 23.04.2008, 18:29   #5
Я себе его ещё наворотил (смотри скриншот).

Рядом с каждым пунктом меню справа влепил серенькую стрелочку, подводим мышку, она становится красной, по ней жмём - открывается блок с текстом. Нажимаем ещё раз - блок скрывается.

Если понравится, могу и этот код привести.
Изображения
Тип файла: jpg ScreenShot043.jpg (12.4 Кб, 15 просмотров)
 
Старый 24.04.2008, 22:54   #6
Да, приведи пожалуйста...
 
Старый 25.04.2008, 13:44   #7
Добавьте ещё вот такой скрипт (можно с тем слить в 1):

Цитата:
<script type="text/javascript" >
var imgMouseOverHolder = new Array();
var imgMouseDownHolder = new Array();
function preloader(imgTags){
var newmouseover, newmouseout, newmouseup, newmousedown, oldmouseover, oldmouseout, oldmouseup, oldmousedown
var AL = imgMouseOverHolder.length + 1;
for (var i = 0; i < imgTags.length; i++) {
if (imgTags[i].getAttribute('srcdown')||imgTags[i].getAttribute('srcover')) {
newmouseover = null; newmouseout = null; newmouseup = null; newmousedown = null; oldmouseover = null; oldmouseout = null; oldmouseup = null; oldmousedown = null
if (imgTags[i].getAttribute('srcover')) {imgMouseOverHolder[AL] = new Image(); imgMouseOverHolder[AL].src = imgTags[i].getAttribute('srcover');}
if (imgTags[i].getAttribute('srcdown')) {imgMouseDownHolder[AL] = new Image(); imgMouseDownHolder[AL].src = imgTags[i].getAttribute('srcdown');}
if (imgTags[i].src) {imgTags[i].setAttribute("oldsrc", imgTags[i].src);}
if (imgTags[i].getAttribute('srcover')) {
if (imgTags[i].onmouseover) {imgTags[i].oldmouseover = imgTags[i].onmouseover; newmouseover = function (){this.src=this.getAttribute("srcover"); this.oldmouseover();}}
else {newmouseover = function (){this.src=this.getAttribute("srcover");}}
imgTags[i].onmouseover = newmouseover;
if (imgTags[i].onmouseout){imgTags[i].oldmouseout = imgTags[i].onmouseout; newmouseout = function (){this.src=this.getAttribute("oldsrc"); this.oldmouseout();}}
else {newmouseout = function (){this.src=this.getAttribute("oldsrc");}}
imgTags[i].onmouseout = newmouseout;
}
if (imgTags[i].getAttribute('srcdown')) {
if (imgTags[i].onmousedown) {imgTags[i].oldmousedown = imgTags[i].onmousedown; newmousedown = function (){this.src=this.getAttribute("srcdown"); this.oldmousedown();}}
else {newmousedown = function (){this.src=this.getAttribute("srcdown");}}
imgTags[i].onmousedown = newmousedown;
if (imgTags[i].getAttribute('srcover')) {
if (imgTags[i].onmouseup) {imgTags[i].oldmouseup = imgTags[i].onmouseup; newmouseup = function (){this.src=this.getAttribute("srcover"); this.oldmouseup();}}
else {newmouseup = function (){this.src=this.getAttribute("srcover");}}
imgTags[i].onmouseup = newmouseup;
} else {
if (imgTags[i].onmouseup) {imgTags[i].oldmouseout = imgTags[i].onmousedown; newmousedown = function (){this.src=this.getAttribute("srcdown"); this.oldmousedown();}}
else {newmouseup = function (){this.src=this.getAttribute("oldsrc");}}
imgTags[i].onmouseup = newmouseup;
if (imgTags[i].onmouseout) {imgTags[i].oldmouseout = imgTags[i].onmousedown; newmousedown = function (){this.src=this.getAttribute("srcdown"); this.oldmousedown();}}
else {newmouseout = function (){this.src=this.getAttribute("oldsrc");}}
imgTags[i].onmouseout = newmouseout;
}
}
}
}
}
function preloadimgsrc() {
if (!document.getElementById) return;
var imgTags = document.getElementsByTagName('IMG');
var imgTags2 = document.getElementsByTagName('INPUT'); // For image type submit buttons
preloader(imgTags);
preloader(imgTags2); // For image type submit buttons
}
if (window.addEventListener)
window.addEventListener("load", preloadimgsrc, false)
else if (window.attachEvent)
window.attachEvent("onload", preloadimgsrc)
else if (document.getElementById)
window.onload=preloadimgsrc
</script>
Далее уберите ВЫЗОВ процедцры с надписи (там были ЧИПСЫ) и сделайте следующее:

Цитата:
<P> ЧИПСЫ <img border="0" src="ПУТЬ_К_1_КАРТИНКЕ" srcover="ПУТЬ_К_2_КАРТИНКЕ" srcdown="ПУТЬ_К_2_КАРТИНКЕ" onClick="expandit(this)" alt="Развернуть">
<span style="display:none" style=&{head};><br>
ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ
</span>
 
Старый 05.05.2008, 03:59   #8
И всё же как сделать чтоб текстовый блок на крестик закрывался? бьюсь головой об стену... Я так думаю что надо писать ещё одну функцию, если кто-то поможет, то можно с пояснениями.
 
Старый 05.05.2008, 14:31   #9
делаем например картинку с крестиком, или надпись Далее делаем либо в ссылке все вот так <a href="javascript:фукция закрывающая блок"><img src="qwer.jpg"></a>
или в самой картинке <img src="serewfd.jpg" onclick="функция закрывающая блок"> и все
 
Старый 05.05.2008, 16:35   #10
Это всё понятно, мне нужна сама функция закрывающая блок!
 
Старый 05.05.2008, 16:35
Закрытая тема




Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скриптик для подсчета... arcan ASP, Perl, PHP и MySQL 7 24.01.2007 14:10
Написать небольшой скрипт MasMaX Вакансии 1 22.05.2006 17:49
Помогите создать небольшой эффект Uran Технологии Flash 3 08.03.2005 13:50
Срочно!!! Помогите написать код! Master K HTML, CSS, JavaScript 3 28.02.2004 15:53
Помогите написать чат vitalmar HTML, CSS, JavaScript 2 30.01.2004 03:48


Текущее время: 08:39. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Дизайнерский форум