MouseOver för image

Att göra en MouseOver för två lika stora bilder, som ska byta plats, är enklare än man tror. Det förutsätter att du har 2 bilder, som du kan länka till, tex Picasa typ... Jag hittade ett bra script på nätet:
http://terrysplaypen.blogspot.com/2007/12/tip-mouseover-fun.html

Här är koden:


<br /> <div><img alt="" onmouseout="Javascript: this.setAttribute('src',this.firstsrc);" onmouseover="Javascript: this.firstsrc=this.getAttribute('src'); this.secondsrc ='https://LÄNKEN TILL DIN BILD SOM DYKER UPP EFTER mouse-over'; this.setAttribute('src',this.secondsrc);" src=" https://LÄNKEN TILL DIN BILD SOM SYNS ÖVERST" style="display: block; float: none; margin-left: auto; margin-right: auto;" /></div><div style="text-align: center;"> </div>


Den senare bilden är den som syns, den första i bild-länken är den sekundära.

Tack Terry!

Som exempel kan ni kika på detta inlägg:
http://www.mineden.com/2011/01/aspegrens-tradgard.html


Samma princip kan man använda för att visa bilder med mindre bildformat, och för att vid MouseOver visa ett större format av samma bild.


Fråga om ni inte får till det...

/Nina

Tips & Trix för Blogger

Mouseover för bilder: När man rör med musen så visas en annan bild

Länk som öppnas i ett eget fönster

Ibland vill man att en länk ska öppnas i ett nytt fönster. Lösningen är target="_blank":
tex

P I N T E R E S T

© www.MinEden.com

Posts by Label

Om du vill publicera en länklista på alla dina inlägg som tex har Etiketten(Label) Keramik, så gör du på detta viset. Byt ut Keramik mot ditt etikettnamn.


<!-- Recent Posts by Label Start --><br /> <!-- code by BloggerSentral.com --><br /> <script type="text/javascript"> function recentpostslist(json) { document.write('<ul>'); for (var i = 0; i < json.feed.entry.length; i++) { for (var j = 0; j < json.feed.entry[i].link.length; j++) { if (json.feed.entry[i].link[j].rel == 'alternate') { break; } } var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs var entryTitle = json.feed.entry[i].title.$t; var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li> "; document.write(item); } document.write('</ul>'); } </script><br /> <script src="http://mineden.blogspot.com/feeds/posts/summary/-/Keramik?max-results=40&alt=json-in-script&callback=recentpostslist"></script><br /> <span style="font-size: 80%; float:right;"><a href="http://www.bloggersentral.com/2010/04/list-recent-posts-by-label.html"></a></span><br /> <!-- Recent Posts by Label End --> <br />



Kom ihåg att inte Förhandsgranska, då förstörs koden, fråga inte varför... Vill du i efterhand editera din text så kan du vara säker på att koden inte fungerar. Editera koden i tex Notepad och kopiera in den i sin helhet in i ditt inlägg. Jag vet inte varför den är så svår att få att fungera, men ha tålamod...

Resultatet blir denna: