Sabtu, 10 Juli 2010

Blogger Tip: Mouseover



ve had a few people inquire almost how to create the mouseover Blogger Tip: Mouseover

Run your mouse over the image.

I've had a few people inquire almost how to create the mouseover, then I idea I
would present yous how to gain it.


1. It's non necessary to dorsum upward your template equally yous aren't going to
affect whatsoever usage of the template HTML.

2. You demand to uncovering 2 images yous desire to usage as well as they MUST move the same
size inward measurements. You besides desire to driblet dead on the kilobytes equally depression equally possible
then it doesn't irksome downwards when loading.


3. You demand to upload them somewhere for storage, I uploaded mine to Picasa.
You volition demand the place of the images, pregnant the URL data of both
images, then yous demand to brand banknote of them as well as save.

4. Open a NEW post. You volition non move publishing this one, as well as volition eventually
delete it later showtime saving it equally a draft.  It is alone to assistance yous upload your
images as well as larn the code that is returned.




5. All that remains to create is add together the javascript to"envelope" the 2 images,
or add together the pictures URLs to the Javascript, depends on how yous run into it.
Here's the script.

 ..........................................................

<table align="center"><tr><td align="center">

<img onmouseover="Javascript: this.firstsrc=
this.getAttribute('src'); this.secondsrc=
'https://bp0.blogger.com/_fV9I2C_dAUY/R2Wrh1GGLRI/  
AAAAAAAAASM/pn8sq1dh8vc/s400/tulip_pink_round_blu.
gif'; this.setAttribute('src',this.
secondsrc);" onmouseout="Javascript: this.setAttribute
('src',this.firstsrc);" alt="ve had a few people inquire almost how to create the mouseover Blogger Tip: Mouseover" src='https://bp2.blogger
.com/_fV9I2C_dAUY/R2WrhVGGLQI/AAAAAAAAASE/    
gPIt_Eq88zw/s400/tulip_purple_round_blu.gif' />   
</td></tr></table>

...........................................................
(Post 2nd prototype URL first)
( Post 1st prototype URL second)

6. You tin dismiss re-create as well as glue the code into the post.
* The SECOND (rollover, mouseover, whatever) moving-picture present link is the showtime i to look
inward the script; the FIRST (static) moving-picture present link is included equally the minute link reference -
(hey, it's non me beingness hard - it's the means the script works!).

*You must (duhhh, obviously!) alter the pic URL links inward the script to the ones returned past times Blogger when yous upload your ain pics.

* It is IMPORTANT that yous brand certain that the quotation marks that surroundings the URL links are unmarried ( ' ) as well as non double quotes ( " ), equally this has a relevance on how the script is
executed.


NOTE: Do non re-create as well as paste/edit inward Microsoft "WORD" for it volition add together extra code.
I did mine inward NOTEPAD.
I tin dismiss honestly say, putting this i together was a project as well as sucked all life out of me. I volition residuum now!



Sumber https://shadowhousecreations.blogspot.com

0 komentar

Posting Komentar