Witam, czy jest możliwość zmiany tła, oraz koloru obrysu ramki po najechaniu na dany obrazek, jak tu ?
przykład
Pełna wersja: [HTML][CSS]<img scr, atrybut title>
css: hover
background-color + border
background-color + border
A, mogę prosić przykład kodu ?
przykład
raczej, chodzi mi o to, jak kursor wędruje na zdjęcie pojawia się w ramce opis z <title> i tam bym chciał zmienić tło i obramowanie, dajmy na to na czerwony.
raczej, chodzi mi o to, jak kursor wędruje na zdjęcie pojawia się w ramce opis z <title> i tam bym chciał zmienić tło i obramowanie, dajmy na to na czerwony.
To już Javascript i zdarzenie onmouseover.
Chodzi mi o coś takiego.
A, prościej ?
Cytat(ciapus4 @ 2.06.2013, 14:07:33 ) 
A, prościej ?
A czego nie rozumiesz?
angielskiego ? ^^
Baw się.
Kod
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tooltip - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( document ).tooltip();
});
</script>
<style>
label {
display: inline-block;
width: 5em;
}
</style>
</head>
<body>
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
<p>Hover the field to see the tooltip.</p>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tooltip - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( document ).tooltip();
});
</script>
<style>
label {
display: inline-block;
width: 5em;
}
</style>
</head>
<body>
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
<p>Hover the field to see the tooltip.</p>
</body>
</html>
Nie, no zkumałem tylko jak przerobić kod dla obrazka ?, żeby dymek się pojawiał na nim ?
Dzięki, a gdzie się w kodzie strony wkleja taki kod ? js code.
A, dlaczego taki kod nie działa
tu kod
a, chodzi mi o taki tooltip
tu demo
A, dlaczego taki kod nie działa
tu kod
a, chodzi mi o taki tooltip
tu demo
Pomiędzy znacznikami <script></script>
Bo nie masz tam dodanego skryptu, bez którego var Tips1 = new Tips($$('.Tips1')); nie robi nic (co najwyżej błędem sypnie)
No, przecież na dole jest JS code, a jak nie to jak powinno to wyglądać ?
No chłopie, to są absolutne podstawy pomyśl trochę ten tooltip jest jakąś biblioteką js. Bez dołączenia tej biblioteki nie możesz jej użyć.
http://jsfiddle.net/53hsJ/10/
zauważ, że dodałem mootols more
http://jsfiddle.net/53hsJ/10/
zauważ, że dodałem mootols more
Wystarczyło podejrzeć jak jest w źródle strony z demo
http://jsfiddle.net/xvWNP/
a na jsbin nie działało bo tak samo nie dodałeś mootools, btw nie posiadają oni tam mootools more wiec normalnie to tam by nie zadziałało ale akurat tam da się dodać z innych zródeł np jsfiddle.net chociaż nie wiem poco raz dajesz w tym raz w tym http://jsbin.com/owupil/866/edit
I poco lądujesz się w js którego ewidentnie nie znasz skoro dałem Ci na tacy rozwiazanie w CSS ...
http://jsfiddle.net/xvWNP/
a na jsbin nie działało bo tak samo nie dodałeś mootools, btw nie posiadają oni tam mootools more wiec normalnie to tam by nie zadziałało ale akurat tam da się dodać z innych zródeł np jsfiddle.net chociaż nie wiem poco raz dajesz w tym raz w tym http://jsbin.com/owupil/866/edit
I poco lądujesz się w js którego ewidentnie nie znasz skoro dałem Ci na tacy rozwiazanie w CSS ...
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.