Help: document.getElementById("spanImg").style.src =

Hello & Thanks :
Since the background-image: cover; property doesnn’t act as advertized , (instead it clips the images height) , I have decided to try the Tag .

The 1st step of that is changing the image on a button click .
I tried this " targetBg.style.src = wholeUrl ; " , but got an error .
I tried this " document.getElementById(“spanImg”).style.src = wholeUrl ; ; " , no error , but blank results with alert() .

So I need help to fix porblem .
Thanks
Code below or see it not work here:
http://vmars.us/ShowMe/changeImage-WIP-Try-SPAN.html

 <!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
<style>        
body {

         font-family: Comic Sans MS;
/*         background-repeat: no-repeat ;
         background-size: cover ;
         backgroundImage: url(http://vmars.us/ShowMe/background-image-01-Ratio-600x476.jpg) ;
 */
    }
    
        
#spanBg {
  border-style: solid ;
    top: 0px;
    width: 100% ;
    height: 100% ;
    align-text: center ;
}

#spanImg {
  width:  100% ;  //  window.outerWidth ;
//  height: 800px ;  //  window.outerHeight ;
//  src:  "http://vmars.us/ShowMe/background-image-01.jpg" ; 
}    

#bottomDiv {
    border-style: solid ;
    border-width: 1px;
    position: absolute;
  bottom: 0px;
  left: 10px;
    }

.buttonPos {
  width: 140px; 
  top: 400px ;  
}
  
#divId{
  text-align: center ; 
}

</style>

<script>
    var imageCount = 1 ; 
    var targetBg = document.getElementById("spanImg"); 
    var bgImgUrl = "http://vmars.us/ShowMe/background-image-0" ;
    var bgExt = ".jpg" ;  var wholeUrl  ;
function changeImage() {
    imageCount = ((imageCount % 5)+1)
    wholeUrl = bgImgUrl + imageCount + bgExt ;
    alert("wholeUrl = " + wholeUrl) ;
//    targetBg.style.src = wholeUrl ; 
  document.getElementById("spanImg").style.src = wholeUrl ;
    alert("wholeUrl = " + wholeUrl) ;
    var checkSrc = document.getElementById("spanImg").style.src ; 
    alert("Img src =  = " + checkSrc) ;
  }
</script>  

<script>
    var widthChange ; var Change ;  var heightChange ;  var repeatChange ;  var sizeChange ;  var positionChange ;
    var targetBg = document.getElementById("spanDiv"); 
function changeBackground() { 
    widthChange = width.value;
    heightChange = height.value;
    sizeChange = size.value;
//    if (heightChange !== "") {    alert("heightChange = " + heightChange ) ; 
//         targetBg.style.backgroundImage = heightChange ;} ;
    if (sizeChange !== "") {    alert("sizeChange = " + sizeChange ) ; 
         targetBg.style.backgroundSize = sizeChange ;} ;
}
</script>

<body id="bodyId"  >  <!--  background = "background-image-01.jpg">  -->
<!--  onload="resizeImage()"  <span id="spanBg"; >  -->  
<span id="spanBg"; >
<img id="spanImg" onclick="changeImage()" src="http://vmars.us/ShowMe/background-image-01.jpg" 
        alt="background-image"  width="100%" height="100%" >
 <center>
    <input type="button" class="buttonPos" onclick="changeImage()" value="Change Image">
</center>



</span>          <!-- id="spanBg";  -->
<!--
<script>
var bodyWidth ; var bodyHeight ; var imageWidth ; var imageHeight ; var img ; 
window.addEventListener("resize", resizeImage());

function resizeImage() { 
// alert("function resizeImage() {")

var targetBody = document.getElementById("spanDiv"); 
// alert(targetBody) ;

bodyWidth  = window.outerWidth  ;
//alert("bodyWidth = " + bodyWidth + "    window.outerWidth = " + window.outerWidth ) ;
bodyHeight = window.outerHeight ;

targetBody.setAttribute("width" , bodyWidth )  ; 
targetBody.setAttribute("height" , bodyHeight )  ; 
targetBody.setAttribute("background.img.width" , bodyWidth )  ; 
targetBody.setAttribute("background.img.height" , bodyHeight )  ; 

//  alert( 'bodyWidth  = ' + bodyWidth  +  "    bodyHeight = " + bodyHeight) ; 

} 
</script>
-->

</body>
</html>

What are you wanting to happen instead?

I want to display the iimage in spanDiv ,
and then modify its width and height on window resize .
Thanks

Sorry, I wasn’t asking for those details.

What I mean to ask is, instead of the background image being clipped, what are you wanting it to do differently from that?

I want it to show the whole image
even as the screen size changes .
Thanks

I find that css-tricks has some good knowledge about such things, and commonly doesn’t involve JavaScript which tends to make things more reliable.

2 Likes

Yes ,that site has some perhaps usable solutions .
But it doesn’t answer my question:
Why don’t these codes work work?:
I need to be able to communicate with the “img” 1st .
Then I’ll work on the other stuff .

targetBg.style.src = wholeUrl ; 

or 

  document.getElementById("spanImg").style.src = wholeUrl ;

Thanks

I think that it’s a mistake to use JavaScript for your background, which is why I’m trying to recommend that you stay with CSS for that instead.

Thanks;
I understand .
The name of the function in question is changeImage() .
Which is ultimately what I am after .
But to get there , I first need to communicate with the “img” .

Can you tell me what’s wrong wwith my code ?

Thanks Paul

You are getting an image property style.src, and are wanting to set it to something else.
I don’t think that CSS styles work in that way.

You can instead use getAttribute and setAttribute to work with the src attribute of the img element.

Why aren’t <img> images used with styles in that way?

According to MDN’s <img> documentation, <img> is a replaced element

And on that replaced element page it says:

they're elements whose contents are not affected by the current document's styles. The position of the replaced element can be affected using CSS, but not the contents of the replaced element itself.

So CSS cannot be used to change the contents of the image.

I suspect that people in the CSS forum will have far greater knowledge and detail about that aspect of things.

2 Likes

Thanks , I’l check out your sources :slight_smile:

There’s also the rather flat statement that src is not a valid element of style.
It’s an attribute, not a style element.

Sorry but it works exactly as advertised and does what it says on the tin :slight_smile:

It is your expectation that something different should happen that is actually at fault.

Either you want your background image to cover the whole background of the element or you don’t.

When you specify the ‘cover’ value for the element concerned the background image’s width and height will be increased proportionately until both cover the element and then the overflow clipped. If instead you use the value ‘contain’ then the whole image will display inside the element but of course will not cover the whole thing unless its aspect ratio is the same.

You can’t stretch images without breaking their aspect ratio otherwise the image will look squashed or stretched. The aspect ratio always needs to be maintained.

If you were talking about the fact that the body image doesn’t show over the whole viewport then you would need to give the body element a min-height equal to the viewport…

e.g.

html,body{margin:0;padding:0;}

body{
	min-height:100vh;
	background:url(http://www.pmob.co.uk/mobile/images/a1.jpg) no-repeat 50% 50%;
	background-size:cover;
}

Any other approach is not worth considering and js certainly is not required for this :slight_smile:

Also the code you posted in post#1 is poorly constructed and doesn’t really make sense.

e.g.

#spanBg {
  border-style: solid ;
    top: 0px;
    width: 100% ;
    height: 100% ;
    align-text: center ;
}

A span is an inline element and will not accept dimensions unless you make it display:block (and in which case it probably should be a block element by default depending on context). The top:0 is redundant and does nothing and there is no such thing as align-text:center.

You apply a border but give it no width which means the browser will probably give it the default width of 3px. Therefore if the element accepts 100% width and height and also has 3px borders around the edge it will be to big to fit anywhere :slight_smile: Of course as you applied those dimensions to a span you do not get the width and height at all.

Even if you did apply display:block to the span there would still be no height because you can’t base a percentage height on an element unless its parent has a height defined and if that parent is a percentage height then there has to be a whole chain back to the root element. You can use the vh unit (in modern browsers) to get a viewport height element though and generally you would use a min-height as per the code I offered above. Percentage heights though will always need an unbroken chain of height back to the root html element (and min-height on the parent does not count).

Lastly the w3c validator should be your first stop to check the css and html you are using is correct and will at least avoid the typos that we all introduce at some time. :slight_smile:

1 Like

Thanks

Ok , PaulOB ,
Yes , I am learning , there lots of things I do not yet know .
Thanks for your help :slight_smile:

1 Like