Frågan#1
Söker ett script eller liknande för denna funktion. Jag vore även tacksam för en benämning gärna på engelska för fenomenet, så jag kan googla på det.
Tacksam för svar.
Tumnaglar som blir stora när man drar musen över.
16 svar · 3 735 visningar · startad av Anders Gusten
Image Zoom?
Tack!
Jag vill ha när man drar musen över men det måste väl gå att ändra i onMouseOver. Jag hittade ingen css-kod fast det refereras till HTML.
Jag skulle helst vilja har den att förstora bilden när man för musen över och förminska igen när man drar bort musen.
Det var exakt vad jag sökte efter men jag får det inte att funka. Jag har laddat ner tummarna och lagt in koden i ett nytt html-dokument.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative; /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(thumb_bg.png) no-repeat center center; /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}
</style>
<script language="JavaScript" type="text/javascript">
$("ul.thumb li").hover(function() {
$(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/
$(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
.animate({
marginTop: '-110px', /* The next 4 lines will vertically align this image */
marginLeft: '-110px',
top: '50%',
left: '50%',
width: '174px', /* Set new width */
height: '174px', /* Set new height */
padding: '20px'
}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */
} , function() {
$(this).css({'z-index' : '0'}); /\* Set z-index back to 0 \*/
$(this).find('img').removeClass("hover").stop() /\* Remove the "hover" class , then stop animation queue buildup\*/
.animate({
marginTop: '0', /\* Set alignment back to default \*/
marginLeft: '0',
top: '0',
left: '0',
width: '100px', /\* Set width back to default \*/
height: '100px', /\* Set height back to default \*/
padding: '5px'
}, 400);
});
</script>
</head>
<body>
<ul class="thumb">
<li><a href="#"><img src="thumb1.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb2.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb3.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb4.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb5.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb6.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb7.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb8.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb9.jpg" alt="" /></a></li>
</ul>
</body>
</html>
Jag får bara tummarna på sidan och det händer ingenting när jag hovrar.
Du inkludera inte jquery ser det ut som.
använd gärna [kod]-block när du har kod, bli betydligt enklare att läsa av dina koder.
Du inkludera inte jquery ser det ut som.
använd gärna [kod]-block när du har kod, bli betydligt enklare att läsa av dina koder.
Jquery är väl javascriptet? Ska använda kod-formateringen nästa gång. Vilka ord googlade du på?
Ja, det är ett JavaScripts ramverk man måste inkludera för att använda sig av deras koder. Vilket din kod kräver
Ja, det är ett JavaScripts ramverk man måste inkludera för att använda sig av deras koder. Vilket din kod kräver
Men som jag kan se finns det ingen annan kod än den jag lagt in. Jag är ju nöbrjare och trodde jquery var i princip samma sak som javascript.
JQuery bygger på javascript, det är ett Javascripts ramverk. Jquery gör mycket du slipper tänka på när det gäller hur Javascript/DOM hanteringen fungera på olika webbläsare.
Din kod kommer inte fungera av den enkla anledningen att du använder dig av jquery syntax.
Gå till jquery.com och ladda ner jquery versionen och inkluderade den på din sida
och längst ner på din html sida (innan </body) så kör du din JS kod:
<script language="JavaScript" type="text/javascript">
$("ul.thumb li").hover(function() {
$(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/
$(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
.animate({
marginTop: '-110px', /* The next 4 lines will vertically align this image */
marginLeft: '-110px',
top: '50%',
left: '50%',
width: '174px', /* Set new width */
height: '174px', /* Set new height */
padding: '20px'
}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */
} , function() {
$(this).css({'z-index' : '0'}); /* Set z-index back to 0 */
$(this).find('img').removeClass("hover").stop() /* Remove the "hover" class , then stop animation queue buildup*/
.animate({
marginTop: '0', /* Set alignment back to default */
marginLeft: '0',
top: '0',
left: '0',
width: '100px', /* Set width back to default */
height: '100px', /* Set height back to default */
padding: '5px'
}, 400);
});
</script>
(eller kör den med jquerys DOM-ready funktion), kolla: http://www.sohtanaka.com/web-design/examples/image-zoom/ så har du ju en demo och källkod att utgå ifrån.
Alltså, rubriker som t.ex. den här tråden har kan ju få icke-datanördar att fundera på vad det är för pervos som härjar på wF.
Alltså, rubriker som t.ex. den här tråden har kan ju få icke-datanördar att fundera på vad det är för pervos som härjar på wF.
Var inte orolig. Jag ska inte dra min mus över din tumnagel.
Tack för svaret!
JQuery bygger på javascript, det är ett Javascripts ramverk. Jquery gör mycket du slipper tänka på när det gäller hur Javascript/DOM hanteringen fungera på olika webbläsare.
(eller kör den med jquerys DOM-ready funktion), kolla: http://www.sohtanaka.com/web-design/examples/image-zoom/ så har du ju en demo och källkod att utgå ifrån.
JQuery bygger på javascript, det är ett Javascripts ramverk. Jquery gör mycket du slipper tänka på när det gäller hur Javascript/DOM hanteringen fungera på olika webbläsare.
Din kod kommer inte fungera av den enkla anledningen att du använder dig av jquery syntax.
Gå till jquery.com och ladda ner jquery versionen och inkluderade den på din sida
och längst ner på din html sida (innan </body) så kör du din JS kod:
(eller kör den med jquerys DOM-ready funktion), kolla: http://www.sohtanaka.com/web-design/examples/image-zoom/ så har du ju en demo och källkod att utgå ifrån.
man ska hämta någon kod bå jquerys hemsida alltså som man alltid ska inkludera i scripten?
jag har annars lagt in exakt den kod som fanns på sothanasidan.
är det någon som hittar nån demo och kod på denna länken förresten?
Antigen laddar du ner jquery och inkludera du den på din hemsida, eller kör du mot en CDN exempelvis:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
är det någon som hittar nån demo och kod på denna länken förresten?
Ja, finns ju länk som säger: "Try out a demonstration". Detta är ett jquery-plugin som kräver att du har jquery inkluderad, men inte underhålls av jquery teamet.