Drop Down Menu na fotkach

euphoria-art

Avatar: euphoria-art

2013-12-11 20:11

Witam, jak zrobić aby po najechaniu zdjęcia wskaźnikiem nasuwał się biały pasek półprzezroczysty z nazwą podstrony, strona testowa z kolumnami w postaci fotek - http://obrazyolejne.cba.pl/ - chciałbym to zmodyfikować na coś takiego jak na tej stronie http://dancestore.pl/ . Mam podpiętą bibliotekę jQuery wydaje mi się że by wystarczyło kilka linijek kodu + ustawienia w stylach.

» Quick.Cms v5.x

temperator

Avatar: temperator

2013-12-13 10:38

tu masz podobny efekt

http://tympanus.net/TipsTricks/DirectionAwareHoverEffect



tu kolejna wersja

<html>
<head>
<title>Tooltip - przykład</title>
<script type="text/javascript">
function showTip(oEvent) {
var oDiv = document.getElementById("divTip1");
oDiv.style.visibility = "visible";
oDiv.style.left = oEvent.clientX + 5;
oDiv.style.top = oEvent.clientY + 5;
}

function hideTip(oEvent) {
var oDiv = document.getElementById("divTip1");
oDiv.style.visibility = "hidden";
}
</script>
</head>
<body>
<p>Umieść kursor myszy na czerwonym kwadracie.</p>
<div id="div1"
style="background-color: red; height: 50px; width: 100px"
onmouseover="showTip(event)" onmouseout="hideTip(event)"></div>

<div id="divTip1"
style="background-color: yellow; position: absolute; visibility: hidden; padding: 5px">
<span style="font-weight: bold">Własna podpowiedź</span><br />
W tym miejscu można umieścić bardziej szczegółowe informacje.
</div>
</body>
</html>



a ta wersja która chyba najbardziej ci pasuje

http://css-tricks.com/examples/SlideinCaptions/

infostki.pl

euphoria-art

Avatar: euphoria-art

2013-12-13 20:13

temperator jak możesz pomóc to byś napisał dostosowany kod, wydaje mi się że trzeba go wżucić do header.php następnie ostylować w style.css nie wiem czy dobrze kombinuje ale coś mi nie chce działać

temperator

Avatar: temperator

2013-12-14 14:14

tak w templates/default/_header.php w <head> trzeba dodać kod + *.js np w pluginach .zrobie takie coś http://css-tricks.com/examples/SlideinCaptions/ ale to jak wrócę z wakacji za 1.5 m-ca. kod do pobrania będzie dostępny za free tutaj http://infostki.pl/?quickcms,9
jak chcesz kombinować to podpowiem ze mozna wykorzystać częściowo efekt glass

jquery-1.1.4.js + ten kod

W templates/default/_header.php w <head>

<script type="text/javascript" src="<?php echo $config['dir_plugins']; ?>glass/jquery-1.1.4.js"></script>
<script type="text/javascript" charset="utf-8">
var j = jQuery.noConflict();
</script>
<script type="text/javascript">
j(document).ready(function(){
j("a img").fadeTo(10, 1.0); // This sets the opacity of the thumbs to fade down to 60% when the page loads
j("a img").hover(function(){
j(this).fadeTo(0, 0.7); // This should set the opacity to 100% on hover
},function(){
j(this).fadeTo(0, 1.0); // This should set the opacity back to 60% on mouseout
});
});
</script>

www.infostki.pl

euphoria-art

Avatar: euphoria-art

2013-12-16 16:20

Dzięki, długie masz wakacje, ale ok poczekamy ;)

Do góry
o nas | kontakt