Hi, I have made a small jQuery snippet to demo the image swapping with attr() funciton. The demo uses 2 images with classes img1 and img2 respectively. On a click of a button, the images are swapped. Basically the script stores “src†value into a variable and then it is used to swap 2 image sources. Demo Link For jQuery Image Swapping. Best Regards, Nirmala
Are you somekind of a post hunter or what !? You really made a topic about the .attr() method ? Who uses img in HTML anymore ? block divs / spans would do either way and you'll just have to use .css() method which is especially designed for that.
Hi, I am not just saying "thank you" , "great post" or similar post hunting threads. I am posting here useful scripts for people. And I wonder why you say "img" is not used in HTML anymore. If you are not using IMG, you are lost in search engine rank image searches. Block spans or DIVS can contain images only as background images. These background images will not be visible to search engines and you wont get anywhere in image searches. Suppose if you are running a portfolio like sites or photo sites, you will have to use only IMG tags. And one more thing, in general, a task in html can be accomplished in many ways. I have posted her one of the ways only. Anyways, Thanks for your comment.
Supposing you're a designer not a coder, clients who take a look at your portofolio's source code we'll not be upset that you're using blocks or divs for showing images instead img's, 'cause they are just looking for the design itself.' And if you're a coder, you wouldn't make a portofolio with img's because you wouldn't feel the need of indexing some images that are not even conclusive when you have the demo for the script you're trying to sell/show. Correct me if i'm wrong but that's just my point of view.
I am a coder. I can convert any design into HTML with image tags or background images. But i prefer only using images directly than using background images. This starts from the logo itself. I see many people use background images in a DIV or SPAN and float it to left. But what i do is, I will surround the image of logo with H1 tag with alt attribute. This will look good visually as well search engines see the highest level of keyword in H1. Inside H1 they see alt tag. I myself run a blog to sell themes. You can see that in my signature. I get lots of good traffic from images only.
The REAL laugh of this is that if you had ID's instead of classes, you could do it in roughly the same code WITHOUT jQuery... much less the paragraph around a non paragraph element and clearing div like it's still 2001. Gut the markup down to: <img src="http://blog.pixelthemes.com/demo/jquery-image-swap/american-flag.jpg" id="img1" /> <img src="http://blog.pixelthemes.com/demo/jquery-image-swap/colors-of-england.jpg" id="img2" /> <span id="swapButton">Swap Images</span> then: <script type="text/javascript"> document.getElementById('swapButton').onclick=function() { var d=document, i1=d.getElementById('img1'), i2=d.getElementById('img2'), t=i1.src; i1.src=i2.src; i2.src=t; } </script> Code (markup): Which at 252 bytes is 47 less than you ended up with using that fat bloated steaming pile known as jQuery... Which in reality I guess makes it 32k less if you think about it. EXCELLENT example you have there of everything wrong with most of the garbage people do with jQuery... admittedly some of the advantage comes from using a span so you don't have to 'preventdefault'... and not bothering to hook onload since there's no reason to wait on hooking it if you're running it at the bottom of BODY like a good little doobie -- and even with doing the prevent manually it's still around 330 bytes -- spitting distance... Of course, I'd also probably make sure both IMG tags were accessible by having alt text and swap that too... Still, ATTR is one of those silly bits of jQuery that leaves me going... Really? REALLY? What the blue blazes is wrong with just *SHOCK* accessing the attribute normally? No, that would be too easy :/