GoFuckYourself.com - Adult Webmaster Forum - Question for the HTML5 Brainiacs of GFY

- Fucking Around & Business Discussion (https://gfy.com/forumdisplay.php?f=26)

- - Question for the HTML5 Brainiacs of GFY (https://gfy.com/showthread.php?t=1214101)

Question for the HTML5 Brainiacs of GFY

Greetgins and salutations!

I have a question for the HTML5 gurus:

How can I display a default image in HTML5 if the image I want is not available?

Here's a piece of code:

<div style="background-image: url(images20/intro.jpg);">

But in certain circumstances, the file named intro.jpg will not always exist. So when this file does not exist, I want it to load a different image. For example, default.jpg

I can do this already with a standard IMG tag, like this:

<img id="currentPhoto" src="intro.jpg" onerror="this.src='Default.jpg'">

But how do I do it when using a background image in a div?

<div style="background-image: url(images20/intro.jpg), url(default.jpg);">

That should use default.jpg as a fallback if the intro.jpg is not available.

.

Thanks sarettah, but this doesn't seem to work for me :( Maybe the format is wrong?

Here's the full line:

<div style="background-image: url(/images20/##Namevar##.jpg), url(/images20/default.jpg);">

(Namevar is dynamic. If the name doesn't exist, it should load default.jpg. but it dont dag nabbit!)

why not bust one of these:

<div class="image-with-default" style="background-image: url(image.jpg)">

then in your CSS just add an image there as the default with the image-with-default class

edit: no that wont work, i guess the first one would be overwritten, why not check if namevar exists and if it doesnt dont put in that line with the style stuff at all

Quote:

Originally Posted by ********** (Post 21130285)

Works for me when I test it. http://madspiders.com/htmltest.html

Tried it in both chrome and firefox and both show the default image when the intro image is not there and show the intro image when it is there. Right now it should be showing the default.jpg because I renamed the intro.jpg to move it out of the way.

Only difference in what code I am using is I have given a width and height attribute because otherwise it is an empty div without any size and won't show at all. I figured you probably had something in the div or had size attributes assigned in a style sheet, but I could be wrong about that.

The code I have in there:

Code:

<html>

  <head>

  <title></title>

  </head>

  <body>

  <div style="width:500px;height:500px;background-image: url(images20/intro.jpg), url(images20/default.jpg);"><div>

  </body>

</html>

Reworked it a few minutes ago using the exact same syntax you showed and it still works for me so I am guessing that you did not have any size attributes assigned to the div and it was empty so it did not show.

Code:

<html>

  <head>

  <title></title>

  </head>

  <body>

  <div style="width:500px;height:500px;background-image: url(images20/##Namevar##.jpg), url(images20/default.jpg);"><div>

  </body>

</html>

Thanks! I will try it again.

Hey Sarettah, thanks for your help! I got it to work. It originally wasn't working for me because my image variable had a space character in it.

So
if image name = "ThisImage.jpg", then display it.
if image name = "SomeOtherImage.jpg" then display default.
if image name = "Some other Image.jpg" then display nothing, which was what it was doing.

Thanks again!