1

I'm trying to append the title of each image of an array to each individual image who's height and width are greater than x

*Couldn't figure out how to format this correctly with the editor

var curHeight;
var curWidth;
var hr;
function imgHr(){
  var allImages = document.images;
   for (var i=0; allImages.length > i; i++) {
     var imgSrc = allImages[i].src;
     var newImg = new Image();
     newImg.src = imgSrc;    
     curHeight = newImg.height;
     curWidth = newImg.width;
      if(curWidth>='80' && curHeight>='80'){
         var imgGet=allImages[i];
         var hrT=allImages[i].title;
         var hr= document.createElement("hr");
         hr.style.border-bottom="1px solid skyblue";
         hr.innerHTML=hrT;
         //appendChild isn't working
         imgGet.appendChild(hr);
         //but everthing else works: example
         imgGet.style.border="1px solid red";
       } else {
         //maybe add something later
       }
    }   
 }

OK this solved my case

function insertafter(newChild, refChild){ 
 refChild.parentNode.insertBefore(newChild,refChild.nextSibling);
 }
Tj tarmon
  • 35
  • 1
  • 1
  • 4

1 Answers1

0

Your error is in hr.style.border-bottom="1px solid skyblue". In javascript you need to use camelCase properties: hr.style.borderBottom="1px solid skyblue". See this SO-question.

Furthermore, you can't use appendChild on an img element. You'll have to wrap the image in a div (so: create a div element, append the img to that, remove the img from it's original position, create a hr element, append it to the div).

Last but not least: you can't use innerHTML with a h(orizontal)r(uler). So what remains is: create a div element, append the img to that 1, remove the img from it's original position, create a textNode (or a span) containing the img title, and append that to the div.

1 another idea may be to use the image as a background image for the newly created div.

Community
  • 1
  • 1
KooiInc
  • 119,216
  • 31
  • 141
  • 177
  • Thanks, for pointing that out. But the appendChild is still not working. – Tj tarmon Jul 15 '11 at 06:49
  • so appendChild will try to nest the new element inside of the img element? So I would need to use jQuery's (.after) to achieve this without adding addition div elements? – Tj tarmon Jul 15 '11 at 07:15
  • I see no other way to do this without using jQuery. Your method would have worked to, but i'd rather not manually wrap div elements around my large base of images. Thanks for making that clear – Tj tarmon Jul 15 '11 at 07:24
  • Hi Tj, edited some more, as it occured to me that you were trying to use `innerHTML` for a `hr` element. I never use JQuery, so can't tell if it's more applicable in this case. – KooiInc Jul 15 '11 at 07:38
  • Actually my aim was to append the new element (

    title

    ) after the image. but this can't be achieved in javascript alone. *sorry the horizontal rule was meant to be a header element (h1). I confused my self by using the hr(for header) as the variable.But thanks again     – Tj tarmon Jul 15 '11 at 08:30