thewooleymammoth Posted December 21, 2009 Share Posted December 21, 2009 Is is possible to have a page that automatically adds a couple things to all image tags? ex: <html> <img src='random image.jpg' /> </html> -> <html> <img style='display: none;' onload='load_function(this)' src='random image.jpg' /> </html> I would like the javascript to add those to the img tag whenever it is in the page.... I'm pretty new to js and I dont really know if this is possible but i hope it is. Any suggestions appreaciated. Link to comment https://forums.phpfreaks.com/topic/185936-apply-javascript-function-to-all-objects-of-a-certain-type/ Share on other sites More sharing options...
KevinM1 Posted December 21, 2009 Share Posted December 21, 2009 Why not apply a CSS class to all the items you want to have a certain appearance? Regarding the inline JavaScript function call, you'll probably be better off using an unobtrusive coding method instead. Instead of putting the function in each img tag (which could be maddening in its tediousness), do something like: <!DOCTYPE html> <html> <head> <title>Blah</title> <style> img { display: none; } </style> </head> <body> <!-- all site code, except NO JavaScript in your tags --> </body> <script type="text/javascript"> var images = document.getElementsByTagName('img'); for(var i = 0; i < images.length; ++i) { images[i].onload = function)() { //function definition } } </script> </html> Link to comment https://forums.phpfreaks.com/topic/185936-apply-javascript-function-to-all-objects-of-a-certain-type/#findComment-981884 Share on other sites More sharing options...
thewooleymammoth Posted December 21, 2009 Author Share Posted December 21, 2009 Thanks, i have css applied to all of the ones i want, however i'm using scriptaculous to make all of the images fade in onload instead of do that lame scroll in as it loads the images. I would like to apply this to all the images in my site, however i use ajax alot so something like what you suggested would work in most pages, but it wouldnt work with the images that are loaded via ajax would it? also with the scriptaculous, if you dont add style='display: none;' inline, it wouldnt be able to make it appear, so thats why i would want that css in there. Link to comment https://forums.phpfreaks.com/topic/185936-apply-javascript-function-to-all-objects-of-a-certain-type/#findComment-981914 Share on other sites More sharing options...
KevinM1 Posted December 21, 2009 Share Posted December 21, 2009 Thanks, i have css applied to all of the ones i want, however i'm using scriptaculous to make all of the images fade in onload instead of do that lame scroll in as it loads the images. I would like to apply this to all the images in my site, however i use ajax alot so something like what you suggested would work in most pages, but it wouldnt work with the images that are loaded via ajax would it? To be honest, I'm not sure. How are you loading the images, exactly? Link to comment https://forums.phpfreaks.com/topic/185936-apply-javascript-function-to-all-objects-of-a-certain-type/#findComment-981919 Share on other sites More sharing options...
thewooleymammoth Posted December 21, 2009 Author Share Posted December 21, 2009 html <img src='/portfolio/$site/main.jpg' id='main_image' style='display: none;' onload='ma(this);' />"; javascript function ma(id) { $(id).appear(); } below the image i have the background image set to something that says loading..., you can check out an example here www.ericwooley.com which is gonna be my site for my portfolio and info etc..., it nowhere near done so don't judge it too bad yet. anyways click on portfolio and check out the slide show thing. Those images load like i would like, but i want to set the site so it automatically adds that to any image tag. still not sure if its possible, maybe like regex set to periodically check for new images? that wouldnt be nice to the client computer though. Link to comment https://forums.phpfreaks.com/topic/185936-apply-javascript-function-to-all-objects-of-a-certain-type/#findComment-981927 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.