Header disapeared overnight, why?

Which theme are you using and can you share with us a link to your site?

Hi Jan,
Thank you for your fast reply!
Sorry forgot that info, I’m using Willingness (although now child theme of willingness).
Here is my site: https://tinahallden.se/

realised now that maybe it is a problem with the code for the imagemap afterall, does this look weird to you? (maybe it’s a problem whit image-maps.com where i made the header image-map?)

if ( ! empty( $header_image ) ) { ?>
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
			<div style="text-align:center; width:1140px; margin-left:auto; margin-right:auto;">
		<img id="Image-Maps_3201310180248407" src="https://www.image-maps.com/uploaded_files/3201310180248407_1_headerfrontpage1.jpg" usemap="#Image-Maps_3201310180248407" border="0" width="1140" height="402" alt="" />
		<map id="_Image-Maps_3201310180248407" name="Image-Maps_3201310180248407">
		<area shape="rect" coords="118,168,359,366" href="https://tinahallden.se/om-mig/" alt="Klicka h?r f?r info om mig!" title="Klicka h?r f?r info om mig!" onMouseOver="if(document.images) document.getElementById('Image-Maps_3201310180248407').src= 'https://www.image-maps.com/uploaded_files/3201310180248407_headerfrontpage2.jpg';" onMouseOut="if(document.images) document.getElementById('Image-Maps_3201310180248407').src= 'https://www.image-maps.com/uploaded_files/3201310180248407_1_headerfrontpage1.jpg';"  />
		<area shape="rect" coords="439,295,680,371" href="https://tinahallden.se/yrkeserfarenhet/" alt="Klicka h?r f?r arbetsprover!" title="Klicka h?r f?r arbetsprover!" onMouseOver="if(document.images) document.getElementById('Image-Maps_3201310180248407').src= 'https://www.image-maps.com/uploaded_files/3201310180248407_headerfrontpage2.jpg';" onMouseOut="if(document.images) document.getElementById('Image-Maps_3201310180248407').src= 'https://www.image-maps.com/uploaded_files/3201310180248407_1_headerfrontpage1.jpg';"  />
		<area shape="rect" coords="706,258,874,365" href="https://tinahallden.se/utbildning/" alt="Klicka h?r f?r info om studier!" title="Klicka h?r f?r info om studier!" onMouseOver="if(document.images) document.getElementById('Image-Maps_3201310180248407').src= 'https://www.image-maps.com/uploaded_files/3201310180248407_headerfrontpage2.jpg';" onMouseOut="if(document.images) document.getElementById('Image-Maps_3201310180248407').src= 'https://www.image-maps.com/uploaded_files/3201310180248407_1_headerfrontpage1.jpg';"  />
		<area shape="rect" coords="904,226,989,342" href="https://tinahallden.se/kontakta-mig/" alt="Klicka h?r och kontakta mig!" title="Klicka h?r och kontakta mig!" onMouseOver="if(document.images) document.getElementById('Image-Maps_3201310180248407').src= 'https://www.image-maps.com/uploaded_files/3201310180248407_headerfrontpage2.jpg';" onMouseOut="if(document.images) document.getElementById('Image-Maps_3201310180248407').src= 'https://www.image-maps.com/uploaded_files/3201310180248407_1_headerfrontpage1.jpg';"  />
		<area shape="rect" coords="1138,400,1140,402" href="https://www.image-maps.com/index.php?aff=mapped_users_3201310180248407" alt="Image Map" title="Image Map" />
		</map>

		</div>

Image maps. *Shudder* ??

Visiting your site the big missing image looks like this one.

https://www.image-maps.com/uploaded_files/3201310180248407_1_headerfrontpage1.jpg

Which is generating a 404 file not found for me. Can you confirm that that’s the image URL you meant? You may want to put that image into your theme directory.

P.S. Thanks for using he code backtick correctly! It made your post so much easier to read. ??

Haha, yes! Didn’t really expect that it would be such a hazzle with the imagemap ??

Yes, that’s the img url i mean. I did create a new directory called image under my willingness-child directory in filezilla (is this what you mean?), also uploaded the image again, and could not see any change.

Now I also tried to put in the original code from the header of willingness, then the image header comes back, but without the imagemap and mouseoverfunction i so desperately wanted ?? So weird it worked before with this code, I must have missed something.Starting to realise that maybe the problem is the imagemap afterall, have you any idea how to fix it if that’s the case?
Thank you so much for your replies, really grateful for your input! ??

I did create a new directory called image under my willingness-child directory in filezilla (is this what you mean?)

Yep, that’s what I meant and it looks like the image is now loading.

https://tinahallden.se/wp-content/uploads/2013/10/copy-headerfrontpage11.jpg

That’s better.

Starting to realise that maybe the problem is the imagemap afterall, have you any idea how to fix it if that’s the case?

Not me personally as I usually run for the hills at the sight of image maps. But I am hoping that someone I know *cough*named Andrew or WPyogi*COUGH!!* reads this and perhaps provides some good insight. ??

Thanks again Jan, for your input and help and super quick response!
Realise now that it really is the imagemap that doesn’t work all of a sudden for some reason, gahh ??
I tried recreating it and still won’t take, if anyone has some insight as if to why, I would jump of joy! ??
Short info: I used image-maps.com to crate the map, changed the base url to my site and followed instructions, now since I created child theme, the code won’t “stick”, it has no effect except that the header img disappear totally. What to do?
Thanks for all help!

Oh, so sorry Jan, I’m sticking to this post of course, was too eager ??

Talk to Image-Maps as to why the image you created does not exist.

Hi Andrew,
I tried contacting them with another question weeks ago, with no reply. I have sent this question also, but I’m not hopeful to get a response with the earlier experience..
Do you know another way to create an imagemap with mouseover with perhaps a plugin (tried several and failed)? Or in any other way? I’m not “afraid” of HTML, but very novice as already may have been appearent ??

Your image map is probably okay, you need to find a way to create an image and then host it online so that you can reference it in your image map.

Hmmm, a bit confused, I honestly don’t understand what to do?
I have created two images, one for mouseon and one for mouseoff, both of the images I have uploaded to the medialibrary in wp and to Filezilla, to a new directory for my childtheme, in a subdirectory named “Images”. Is this what you mean?
I uploaded the images from desktop and figured the code would do the rest?
I understand I’m missing something here.
Could the problem stem from my childtheme? Since I recently installed it and short after the problems begun? For instance, I have copied header.php from parent to child, can this cause the problem?
It’s only when I have the original code in header.php that the image header is visible, as soon as I try to modify the code, the image disappears totally..
Thank you again for patience and help!

Yiippppiii! I think I actually solved it! I messed up the links in the code when I created the image map, that’s why it didn’t connect with the uploaded images. It worked from the beginning because my images was still stored on the image-map-site!
So ok, if anyone, like me not used to html, is trying to create an imagemap with mouseover, here is how I made it work finally ??
1. upload two exactly the same size images to yr medialibrary in wp
2. upload the onmouseover img to image-maps.com, IMPORTANT, change base url to the url of yr site, update, AND change img url to the url of the img in medialibrary in wp (this is where I went wrong, url created was similar so I missed this step)
3. do exactly the same thing with the offmouseover img and also map out yr hotspots, get yr code
4. paste the code in the header.php, paste over this phrase: <img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
5. paste in the correct url in the code for onmouseover/offmouseover
6. make sure to tab twice before every phrase starting with <
NOW it should work!
THANKS again Jan and Andrew for yr help and input!
Cheers Tina! ??

i follow your steps but in my site is not hovering.

i am using bitnami in localhost untill i get my site done.

i used your code on the heade.php file ans is still not hovering as on your site.

what is the trick to hover?

maybe i have to make on image the header image and another one with the color to be hovered?

i used your code

<img id="Image-Maps_9201310230307368" width="900" height="402" border="0" alt="" usemap="#Image-Maps_9201310230307368" src="https://tinahallden.se/wp-content/uploads/2013/10/headerfrontpage1.jpg"></img>
    <map id="_Image-Maps_9201310230307368" name="Image-Maps_9201310230307368">
        <area onmouseout="if(document.images) document.getElementById('Image-Maps_9201…hallden.se/wp-content/uploads/2013/10/headerfrontpage1.jpg';" onmouseover="if(document.images) document.getElementById('Image-Maps_9201…hallden.se/wp-content/uploads/2013/10/headerfrontpage3.jpg';" title="Klicka h?r f?r info om mig!" alt="Klicka h?r f?r info om mig!" href="https://tinahallden.se/om-mig/" coords="117,167,369,374" shape="rect"></area>
        <area onmouseout="if(document.images) document.getElementById('Image-Maps_9201…hallden.se/wp-content/uploads/2013/10/headerfrontpage1.jpg';" onmouseover="if(document.images) document.getElementById('Image-Maps_9201…hallden.se/wp-content/uploads/2013/10/headerfrontpage3.jpg';" title="Klicka h?r f?r arbetsprover!" alt="Klicka h?r f?r arbetsprover!" href="https://tinahallden.se/yrkeserfarenhet/" coords="430,296,682,376" shape="rect"></area>
        <area onmouseout="if(document.images) document.getElementById('Image-Maps_9201…hallden.se/wp-content/uploads/2013/10/headerfrontpage1.jpg';" onmouseover="if(document.images) document.getElementById('Image-Maps_9201…hallden.se/wp-content/uploads/2013/10/headerfrontpage3.jpg';" title="Klicka h?r f?r info om studier!" alt="Klicka h?r f?r info om studier!" href="https://tinahallden.se/utbildning/" coords="706,256,877,365" shape="rect"></area>
        <area onmouseout="if(document.images) document.getElementById('Image-Maps_9201…hallden.se/wp-content/uploads/2013/10/headerfrontpage1.jpg';" onmouseover="if(document.images) document.getElementById('Image-Maps_9201…hallden.se/wp-content/uploads/2013/10/headerfrontpage3.jpg';" title="Klicka h?r och kontakta mig!" alt="Klicka h?r och kontakta mig!" href="https://tinahallden.se/kontakta-mig/" coords="904,226,990,342" shape="rect"></area>
        <area title="Image Map" alt="Image Map" href="https://www.image-maps.com/index.php?aff=mapped_users_9201310230307368" coords="1138,400,1140,402" shape="rect"></area>
    </map

still not hovering

any ideeas?