Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Javascript för webb, förstora en bild.

1
Skriv svar
Permalänk
Medlem
●

Javascript för webb, förstora en bild.

Hej!

Har börjat smått med att scripta i Dreamweawer och fick en uppgift där jag har stött på problem.

Man ska göra så att en bild blir större (och i färg) när man "hovrar" över den med musen.
Att göra så att man byter bild (som var i uppgiften innan) var inget problem men nu så får jag inte bilden att bli större. Den får bara färger på sig men blir inte större.

<script type="text/javascript">

var data = new Array(0);
data[0] = "gfx/attachment_hot.png";
data[1] = "gfx/calculator_hot.png";
data[2] = "gfx/comment_hot.png";
data[3] = "gfx/cut_hot.png";
data[4] = "gfx/folder_hot.png";
data[5] = "gfx/home_hot.png";
data[6] = "gfx/attachment.png";
data[7] = "gfx/calculator.png";
data[8] = "gfx/comment.png";
data[9] = "gfx/cut.png";
data[10] = "gfx/folder.png";
data[11] = "gfx/home.png";
data[20] = "gfx/attachment_hot2.png";
function bytBild(BildTag, bildIndex){
BildTag.src = data[bildIndex];

}

function BYTBILD(htmltagg, bildIndex){
htmltagg.src = data[bildIndex];

}

</script>

<style type="text/css">

body {
background-color: #00CCFF;
}
</style>
</head>

<body>
<div id="roll" class="row"><h2>Rollover-effekt: byt bild</h2>

<img src="gfx/attachment.png" onmouseover="bytBild(this,0)" onmouseout="BYTBILD(this,6)" width="64" height="64 "/>

<img src="gfx/calculator.png" onmouseover="bytBild(this,1)" onmouseout="BYTBILD(this,7)" width="64" height="64" />

<img src="gfx/comment.png" onmouseover="bytBild(this,2)" onmouseout="BYTBILD(this,8)" width="64" height="64" />

<img src="gfx/cut.png" onmouseover="bytBild(this,3)" onmouseout="BYTBILD(this,9)" width="64" height="64" />

<img src="gfx/folder.png" onmouseover="bytBild(this,20)" onmouseout="BYTBILD(this,10)" width="64" height="64" />

<img src="gfx/home.png" onmouseover="bytBild(this,5)" onmouseout="BYTBILD(this,11)" width="64" height="64" />
</div>

<div id="roll2" class="row"><h2>Rollover-effekt: ändra storlek (och byt bild)</h2>

<img src="gfx/attachment.png" onmouseover="bytBild(this,20)" onmouseout="BYTBILD(this,6)" width="64" height="64"/>

<img src="gfx/calculator.png" width="64" height="64" />
<img src="gfx/comment.png" width="64" height="64" />
<img src="gfx/cut.png" width="64" height="64" />
<img src="gfx/folder.png" width="64" height="64" />
<img src="gfx/home.png" width="64" height="64" />
</div>

</body>
</html>

gfx/attachment_hot2.png är den förstorade bilden med färg etc. attachment_hot.png är bara färg.

Dold text

Det är för övrigt i den "andra" delen som det inte fungerar som det ska. (id="roll2")

Tacksam för svar!

Visa signatur

Citera för svar!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Du har 2 funktioner som gör exakt samma sak. Använd samma funktion 2 gånger istället.

 <img src="gfx/attachment.png" onmouseover="bytBild(this,0)" onmouseout="bytBild(this,6)" width="64" height="64 "/>

Jag antar att du löst svart/vit genom att växla till en bild i det utförandet, tyvärr kan jag inte se dina bilder. Det är nog den enda lösningen som är pålitlig.
En sanbb sökning gav detta, vilket verkade lovande. Fungerar inte på Opera av någon anledning.

Du har inte skrivit någon kod för att ändra storlek, klart den inte gör det då.
Storleken kan du enkelt ändra med följande:

*bildobjekt*.style.height = '100px';
*bildobjekt*.style.width = '200px';

Dock bör man kunna hantera Google om man försöker lära sig javascript.

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av StabTheDrama:

Du har 2 funktioner som gör exakt samma sak. Använd samma funktion 2 gånger istället.

 <img src="gfx/attachment.png" onmouseover="bytBild(this,0)" onmouseout="bytBild(this,6)" width="64" height="64 "/>

Jag antar att du löst svart/vit genom att växla till en bild i det utförandet, tyvärr kan jag inte se dina bilder.

Du har inte skrivit någon kod för att ändra storlek, klart den inte gör det då.
Storleken kan du enkelt ändra med följande:

*bildobjekt*.style.height = '100px';
*bildobjekt*.style.width = '200px';

Dock bör man kunna hantera Google om man försöker lära sig javascript.

Gå till inlägget

Hey, lugn nu! Att ställa frågor i trådar, utan att själv ens försökt lösa problemet tycker vi inte om här på SweC. Men man förstår ändå på TS att han/hon iallafall försökt sätta sig in i detta med javascript. Google ÄR en bra hjälp, men "ibland" ger faktiskt forumet mer hjälp

Har däremot inget svar på TS frågor, men jag såg tråden och kände att ja ville tillägga några ord!

Visa signatur

Project: Perfection 2.0
OS: Microsoft Windows 11 Home | CPU: Intel Core i9 11900 | GPU: EVGA 3080 XC3 Ultra Hybrid
MB: ASUS ROG STRIX B560-I | RAM: Corsair Dominator Platinum 32GB | PSU: Corsair SF750
Chassi: Louqe Ghost S1 MK3 | SSD: Samsung 980 Pro | CPU-Kylare: Fractal Design Celsius+ S24
Bildskärm: LG UltraGear 45GR95QE | Mus: Razer DeathAdder V3 Pro | Tangentbord: Logitech MX Mechanical

Redigera
Citera flera Citera
Permalänk
Medlem
●

Har till halvt löst problemen, men fixar nog det på egen hand till slut.

Testade google men tyckte inte dem gav ett svar jag kunde använda eller förstod vart jag skulle skriva in det. Började med Javascript idag så allt är inte så lätt. Dock gavs samma svar här men det är nu fixat

Tackar för svar!

Visa signatur

Citera för svar!

Redigera
Citera flera Citera
Permalänk
Medlem
●

"fick en uppgift"
Är det en skola som lärt ut detta...?

Redigera
Citera flera Citera
Permalänk
99:e percentilen ★
●

Du ska inte använda JavaScript för att bilden ska bli större. Använd istället följande CSS (som exempel):

img {
    height: 100px;
    width: 100px;
}
img:hover {
    height: 120px;
    width: 120px;
}

Detsamma gäller för att göra bilden svartvit, men det är krångligare.

Visa signatur

Skrivet med hjälp av Better SweClockers

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av HurMycket:

Du ska inte använda JavaScript för att bilden ska bli större. Använd istället följande CSS (som exempel):

img {
    height: 100px;
    width: 100px;
}
img:hover {
    height: 120px;
    width: 120px;
}

Detsamma gäller för att göra bilden svartvit, men det är krångligare.

Gå till inlägget

Då :hover inte fungerar i samtliga webbläsare rekomenderar jag att använda javascript för att lägga till en css-klass vid hover för att sedan lägga till den nya storleken i cssen för denna klass.

img {
    height: 100px;
    width: 100px;
}
img.storbild {
    height: 120px;
    width: 120px;
}
Visa signatur

"Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." - Brian W. Kernighan

Redigera
Citera flera Citera
1
Skriv svar