HTML+CSS+JavaScript

Здравствуйте Уважаемое сообщество.
Нашёл неплохой скрипт фотогалереи на сайте http://ruseller.com/lessons.php?rub=32&id=387, подкорректировал её под свой дизайн
http://my-page45.narod.ru/
Добавил код который выводит текст ссылок,

<div id="box_link_galery">         <div id="stolb_link1">              <ul>                 <li><a href="">АВТОМАТИЗАЦИЯ БИЗНЕСА</a> </li> <br /> <br /> <br /> <br /> <br />                 <li><a href="">ХОЛОДИЛЬНОЕ ОБОРУДОВАНИЕ</a></li> <br /> <br /> <br /> <br /> <br />                 <li><a href="">КУХОННОЕ ОБОРУДОВАНИЕ</a></li>              </ul>         </div>          <div id="stolb_link2">              <ul>                 <li><a href="">ТОРГОВОЕ ОБОРУДОВАНИЕ</a> </li> <br /> <br /> <br /> <br /> <br />                 <li><a href="">СОЗДАНИЕ WEB САЙТОВ</a></li> <br /> <br /> <br /> <br /> <br />                 <li><a href="">КОНТАКТЫ</a></li>              </ul>         </div>           </div>

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

<br /> <br /> <br /> <br /> <br /> .... а CSS для чего?

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

Посмотреть код сего действия и вызывать его при ... чего вам там надо.

http://my-page45.narod.ru/
Хотел чтоб при наведении на ссылку черного цвета, выполнялось то же самое действие что при наведении на маленькую картинку {Шла смена большой картинки, и маленькая выводилась без прозрачности}

продукт расчитан на лохов, как уже говорил автор в одной из тем. так что сойдет :)

>"подкорректировал её под свой дизайн"
Дизайн - это не только красота (сомнительная в Вашем случае), но и удобство.

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

Зачем тогда их разделять?
Логичнее будет навесить обработку события при наведении курсора на ВЕСЬ прямоугольник - что на картинку, что на ссылку, что на пустое пространство между ними.
Или Вы вырабатываете у юзеров "точность движений"?
А если юзер с похмелья и руки у него дрожат? :-)

Ну да правильно вы говорите, Просто та галерея которую я взял отсюда http://ruseller.com/lessons/les387/examples/index.html не предусматривает никаких ссылок, эти сссылки я создал.
Теперь вот возник такой вопрос, как сделать чтоб при наведении указателя на ссылку, выполнялось то же действие что при наведении на маленькую картинку.
Можно конешно и не разделять и сделать общим прямоугольником, но ведь можно это сделать только к ссылке. И хотелось бы так сделать, т. к. после буду делать шаблон для joomla
Может окажете поддержку.

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

<div id="box_galery">         <ul id="pikame">             <li><img src="images/slideshow/image1.jpg" width="428" height="285" alt="" /></li>             <li><img src="images/slideshow/image4.jpg" width="428" height="285" alt="" /></li>             <li><img src="images/slideshow/image2.jpg" width="428" height="285" alt="" /></li>                  <li><img src="images/slideshow/image5.jpg" width="428" height="285" alt="" /></li>             <li><img src="images/slideshow/image3.jpg" width="428" height="285" alt="" /></li>             <li><img src="images/slideshow/image6.jpg" width="428" height="285" alt="" /></li>                 </ul> </div>

Вот код для вывода текста ссылки в фотогалереи

<div id="box_link_galery">     <div id="stolb_link1">              <ul id="pikame">                 <li><a href="">АВТОМАТИЗАЦИЯ БИЗНЕСА</a></li>                  <li><a href="">ХОЛОДИЛЬНОЕ ОБОРУДОВАНИЕ</a></li>                 <li><a href="">КУХОННОЕ ОБОРУДОВАНИЕ</a></li>              </ul>         </div>          <div id="stolb_link2">              <ul>                 <li><a href="">ТОРГОВОЕ ОБОРУДОВАНИЕ</a></li>                 <li><a href="">СОЗДАНИЕ WEB САЙТОВ</a></li>                  <li><a href="">КОНТАКТЫ</a></li>              </ul>         </div>           </div>

css стили для фотогалереи

#box_galery { background-color:#ffffff; width:960px; height:302px; margin:0 auto; color:white;  overflow:hidden; position:relative; z-index:2; border:1px solid black; }      /* These hieghts and widths should be edited to your images */     ul#pikame{     padding:2px 0px 0px 0px;     margin:0 auto; float:left; width:512px; height:294px; border:1px solid red; } .pika_main{     width:428px; height:285px;     padding:7px 8px 8px 7px;      margin:0 auto; float:left; border:1px solid blue; } #pikame li{     padding:10px 142px 13px 7px; margin-right:5px; margin-top:5px;      float: left;     border:1px solid #a2a7a9;     position:relative;      overflow:hidden; background:url(images/slideshow/slideshow_a.png) left top repeat-x; } ul#pikame li img{ position:relative;cursor:pointer; border:1px solid #a2a7a9; } .pika_main img{ border:1px solid #a2a7a9; } .pika_main{position: relative;margin:0 auto; } .pikachoose li{float:left;position:relative;overflow:hidden;list-style:none; } .pika_play{position:absolute;top:10px;right:20px;z-index:1;} .pika_play a{position:relative;margin-left:auto;cursor:pointer;} .pika_play img{border:none !important;} .pika_caption{width:100%;height:30px;text-align:center;} .pika_navigation a{font-size: 12px;color:white;text-decoration: none;} .pika_navigation a:hover{text-decoration: underline;} .pika_navigation{padding-top:10px;clear:both;text-align:center;} #box_link_galery { float:left; width:513px; height:302px; border:1px solid #0000FF; position:relative; top:-302px; left:470px; z-index:3; } #stolb_link1 { float:left; position:relative; width:249px; height:300px; border:1px solid black; } #stolb_link1 ul { float:left; padding-left:115px; } #stolb_link1 ul li { float:left; list-style:none; } #stolb_link1 ul li a { font:bold 10pt Tahoma; color:#000000; line-height:13pt; text-decoration:none; } #stolb_link1 ul li a:hover { text-decoration:underline; }  #stolb_link2 { float:left; position:relative; width:249px; height:300px; border:1px solid black; } #stolb_link2 ul { float:left; padding-left:120px; } #stolb_link2 ul li { float:left; list-style:none; } #stolb_link2 ul li a { font:bold 10pt Tahoma; color:#000000; line-height:13pt; text-decoration:none; } #stolb_link2 ul li a:hover { text-decoration:underline; }

html код для вывода изображений и текста ссылки почти идентичен
делал для текста ссылок, которые выводятся внутри списка <ul id="pikame"> не вышло,
Какие стили мне прописать для (ul, li, a,) ссылки чтоб для текста ссылки выполнялся тот же эфект что и для маленького изображения

>"Можно конешно и не разделять и сделать общим прямоугольником, но ведь можно это сделать только к ссылке."

Откуда Вы такие глупости черпаете?

<ПРАКТИЧЕСКИ_ЛЮБОЙ_ТЕГ onmouseover="alert ('можно делать всё что нужно')">текст</ПРАКТИЧЕСКИ_ЛЮБОЙ_ТЕГ>

В моём случае как это к ссылке применить?

<a onmouseover="alert ('можно делать всё что нужно')">текст</a>

Что в alert написать чтоб заработало?

Вы вообще читаете то, что Вам пишут?

Глупость это (даже не так - ГЛУПОСТЬ) помещать рядом два объекта (ссылку и картинку), объединяя их визуально в прямоугольник и вешать на каждое из них одинаковое действие.

Не нужна ссылка там вообще. Достаточно картинки и ТЕКСТА рядом в одном прямоугольнике. Наведёт клиент мышь на прямоугольник - скрипт сработает.
Ферштейн или нихт ферштейн?

<div onmouseover="alert ('Работаю!')"><img>text</div>

Да и пусть глупость, лишь бы работало.
В сети куча нестандартных и неправильных с точки зрения реализации вешей, но ведь делают же люди.
А что если хотелось так сделать, чтоб при наведении на текстовую ссылку, менялась большая картинка,
Вот решили мы по дизайну реализовать такое и всё. Вот так хотим сделать и всё тут.
Резве это нельзя решить?

>Вот решили мы по дизайну реализовать такое и всё. Вот так хотим сделать и всё тут.

Что-то Вы вдруг заговорили о себе во множественном числе.
Мания величия началась? :-)
-------

>Резве это нельзя решить?

ВСЁ можно решить.
И рАзве.
И рЕзве.

Я Вам уже выше написал - ПРАКТИЧЕСКИ_ЛЮБОЙ_ТЕГ. Видели?

Вешаете функцию на событие onmouseover на маленькую картинку и ЭТУ ЖЕ функцию вешаете на событие onmouseover на соответствующую этой картинке ссылку.
Функция должна изменить SRC у большой картинки.
Дел на 1,5 минуты.
Если ХОТЬ ЧТО-ТО ЗАХОТИТЕ УЗНАТЬ.

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

ВЫ ВЕСЬ КОД ГАЛЕРЕИ ВИДЕЛИ здесь только большая картинка и урезается до маленькой посредством скрипта pikachoose-min.js В этом случае как быть?

Да вероятно вы весь код не смотрели.

Вообще здесь совсем неправильный подход к созданию фотогалереи.
Без шаблона ещё всё работает, а как на joomla ставишь, так конфликт с мутулсом идёт, лучше писать фотогалерею на библиотеке mootuls как здесь http://akma8585.bget.ru/

Не скажете как можно убрать синию движущююся рамку, или где файл или участок кода который обеспечивает движение рамки.
в фотогалереи http://akma8585.bget.ru/

я же вам сказал, если не можете подправить код - поставьте в стилях значени border 0 или вообще уберите его. для вашего говнокода сойдет...

Ни посмотрите ссылку http://my-page51.xmldesign.ru/index.php
Css стили для фотогалереи находятся в файле slideshow_blue.css где там наш border не скажете?
И не скажете как привезать смену картинки к левым пунктам меню в сайдбаре?

С рамкой сделал, http://my-page51.xmldesign.ru/index.php
Ни подскажете как мне привязать смену картинки в фотогалереи к ссылке меню в левом сайдбаре.
Для определённого пункта меню можно прописать

<?php $Itemid = JRequest::getInt('Itemid'); ?>    <!-- инициализация $Itemid (пунктов меню) -->            <?php if ($Itemid == '1' )             {                echo "<img src='templates/template_tut/images/img-1.jpg' width='339' height='255' border='0' />";             }             elseif ($Itemid == '2' )             {                echo "<img src='templates/template_tut/images/img-2.jpg' width='339' height='255' border='0' />";             } }

Что можно поставить в echo чтоб менялась большая картинка в фотогалереи.

Смотрите перед участком кода меню я использую следующий код

<?php $Itemid = JRequest::getInt('Itemid'); ?>    <!-- инициализация $Itemid (пунктов меню) -->                <?php if ($Itemid == '7' )                 {                    echo "<img src='templates/template_tut/images/slideshow/image1.jpg' width='428' height='285' border='0' class='slideshowThumbnail' />";                 }                 elseif ($Itemid == '8' )             {                echo "<img src='templates/template_tut/images/slideshow/image2.jpg' width='428' height='285' border='0' class='slideshowThumbnail' />";             }                 else             {             }             ?>

За счёт него я привязываю определённый пункт меню к нужному рисунку
Как мне сделать так чтоб этот рисунок выводился в фотогалереи.

Смотрите
Для смены картинки в фотогалереи используется следующий участок кода

... <div class="slideshowThumbnail_a">                         <a href="<?php echo $this->baseurl ?>/templates/template_tut/images/slideshow/image1.jpg" class="slideshowThumbnail">                         <span class="slideshowThumbnail_image">                         <img src="<?php echo $this->baseurl ?>/templates/template_tut/images/slideshow/mini1.jpg" border="0" height="70" width="100" alt="" title="" /></span>                         <span class="slideshow_title_text">                           <span class="slideshow_title">                             <?php echo ('АВТОМАТИЗАЦИЯ БИЗНЕСА'); ?>                           </span>                                                 </span>                         </a> </div> ...

Можно ли посредствам HTML и CSS сделать так
чтоб при выборе определённого пункта меню в левом сайдбаре менялась большая картинка для фотогалереи
Для привязки пункта меню можно использовать следующий участок кода.

<?php $Itemid = JRequest::getInt('Itemid'); ?>    <!-- инициализация $Itemid (пунктов меню) -->                <?php if ($Itemid == '7' )                 {                    echo "<img src='templates/template_tut/images/slideshow/image1.jpg' width='428' height='285' border='0' />";                 }                 elseif ($Itemid == '8' )             {                echo "<img src='templates/template_tut/images/slideshow/image2.jpg' width='428' height='285' border='0' />";             }                 else             {             } ?>

Что можно поставить в echo чтоб менялась большая картинка в области фотогалереи