Навигация по баннеру JavaScript или CSS - PullRequest
Новая
       10

Навигация по баннеру JavaScript или CSS

0 голосов
/ 09 января 2012

Я пытаюсь разместить баннер с изображением на моей домашней странице, используя CSS или JavaScript.Я уже несколько дней пытаюсь безуспешно.Ваша помощь будет очень признательна.

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

Iнастроить html и css для элементов навигации и изображений следующим образом: 

<div id="banner-container">
    <img id="img1" src="./path/to/images/1.png" />
    <img id="img2" src="./path/to/images/2.png" />
    <img id="img3" src="./path/to/images/3.png" />
    <img id="img4" src="./path/to/images/4.png" />
    <img id="img5" src="./path/to/images/5.png" />
    <div id="banner-nav">  
        <ul id="navlist"> 
            <li>
                <a href="#" id="1">Portable Tracking</a>
            </li>
            <li>
                <a href="#" id="2">Fleet Management</a>
            </li>
            <li>
                <a href="#" id="3">Plug & Go</a>
            </li>
            <li>
                <a href="#" id="4">Trailer Tracking</a>
            </li>
            <li>
                <a href="#" id="5">Lone Worker</a>
            </li>
        </ul>
    </div>
</div><!--end banner-container-->

1 Ответ

0 голосов
/ 10 января 2012

это то, что вы просите?

вставьте что-то подобное в ваш тег: 

<a href='yourlink' onMouseOver="ChangeImage(0,'ON');" onMouseOver="ChangeImage(0,'OFF');"></a>

и добавьте JavaScript следующим образом: 

var img_on_src=new Array('yourimage1_on.gif','yourimage2_on.jpg','yourimage3_on.png');
var img_off_src=new Array('yourimage1.gif','yourimage2.jpg','yourimage3.png');
var img_directory = "<?php echo home_url('/'); ?>/wp-content/themes/ForetrackWP/images/";
function ChangeImage(img_id,toggle)
{
if(toggle=="ON")
document.getElementById('img' + img_id).src=img_directory + "/" + img_on_src[img_id];
else
document.getElementById('img' + img_id).src=img_directory + "/" + img_off_src[img_id];
}
...