Image-Maps – Links from Header Image

[hoco]

Hi,
I’ve activate the header-Image. There are some logos/icons on it an I want to set links on that. Is it possible to make an Image map? Where in die Website-Code oder database can I add the image-map-Code? Where is the template for the Header Image where I can add the important tags? The “<map>” Tag i can set in Header.php or not? But the usemap-Tag I have to set where the img Tag for the Header Image ist – I can’t find that until now.
Or do you have other ideas?
Thank you very much!
webtest.gct-steuerberatung.at
Regards,
Andy

[Zex]

This reply has been marked as private.

[hoco]

Hi,
thank you very much, with your infos I got it.
But with a bit more code so everything works like the “customizer header image”:

<div id="agama-header-object" class="agama-header-object">
<div id="wp-custom-header" class="wp-custom-header">
<img src="http://prod.gct-steuerberatung.at/wp-content/uploads/headerpic.png" srcset="http://prod.gct-steuerberatung.at/wp-content/uploads/headerpic.png 1200w, http://prod.gct-steuerberatung.at/wp-content/uploads/headerpic-300x15.png 300w, http://prod.gct-steuerberatung.at/wp-content/uploads/headerpic-768x38.png 768w, http://prod.gct-steuerberatung.at/wp-content/uploads/headerpic-1024x51.png 1024w, http://prod.gct-steuerberatung.at/wp-content/uploads/headerpic-800x40.png 800w" sizes="(max-width: 1200px) 100vw, 1200px" width="1200" height="60" alt="Gneist Consulting Team Beratungszentrum" usemap="#link">	
			<map name="link">
  				<area shape="rect" coords="701,2,839,57" href="http://prod.gct-steuerberatung.at/firmen-news/gct-ist-steuerberater-des-jahres/" alt="Steuerberater des Jahres" title="Steuerberater des Jahres">
				<area shape="rect" coords="865,14,1033,55" href="http://www.bmd.com/" alt="BMD Business Software - externer Link" title="BMD Business Software - externer Link" target="_blank">
				<area shape="rect" coords="1048,3,1199,57" href="http://prod.gct-steuerberatung.at/firmen-news/gct-uebernimmt-winkler-steuerberatung/" alt="GCT übernimmt Winkler Steuerberatung" title="GCT übernimmt Winkler Steuerberatung">
			</map>
</div>
</div>

I’ve taken the code from using the customizer header image for this static version of the header pic.
And than I deactivated the customizer header image. For the first view this worked very good. Full Responsible. But it is necessary that first the same header-image ist set via cusomizer because so you get the needed code. (Firefox

[hoco]

Hi again!
One important info was missing: the image-map is only correct working with the full-image-view at 1200×60. The image is responsible, but not the image-map.

Can you help me once again:
how can i hide the header image and also the breadcrumb bar on all mobile views excepting the standard view for PCs/Laptops (all views under width 1200px)?

And another issue:
please visit prod.gct-steuerberatung.at: social icons on top and footer: phone and email icon is missing?!

Thank you very much!

Regards,
Andy

[hoco]

Hi,
I’m so glad, i find the solution for hiding the header image and breadcrumb bar myself 😉

But I’ve still the problem with the phone and email icon (also after update to V1.4.1)

Regards

[Zex]

Hello hoco!

Sorry for the late answer !(weekend 🙂 )

As I can see, your header image on smaller screens is still here. https://prnt.sc/hl8wg6

If you still want to hide it, I suggest you add the code below into
Customize->General->Additional CSS

code:

@media screen and (max-width: 1199px) {
    .vision-page-title-bar, .wp-custom-header{
        display: none;
    }
}

This code will hide the breadcrumb and the header image for the screens with a smaller width than 1200px.

Didn’t see the issue you described in the above post.
As I can see
e-mail icon is there and you don’t have entered the phone number on the top and bottom social icons bar.
https://prnt.sc/hl91fj
https://prnt.sc/hl916i

Best Regards

[hoco]

Hi!
I’ve now tested the issue with E-Mail and Phone, this isn’t working well:

I’ve added Mail and Phone: http://prntscr.com/hqf4fl

There are empty places at the social icon bars:
http://prntscr.com/hqf6d2
http://prntscr.com/hqf6i3

With mouseover:
http://prntscr.com/hqf70q
http://prntscr.com/hqf752
http://prntscr.com/hqf6t1
http://prntscr.com/hqf6wq

I think it is important to add mailadress with “mailto:”, because i get error 404 when i click on the (not visible) E-Mail-Icon: http://prntscr.com/hqf611

And this is the link when clicking on Phone (Telefon): http://prntscr.com/hqf7h3 – also 404

Perhaps a problem with translation?

Regards, andy

[Zex]

Hello Andy!

Are we looking at the same website? (http://webtest.gct-steuerberatung.at/)
On my computer looks like this:

Footer:http://prntscr.com/hqfgnj

Header:http://prntscr.com/hqfk0e

As you can see, there is no blank space, and also there is no text on mouseover (there is a flicker icon instead of e-mail) and the phone, judging by the inspect element, is not even entered.

Can you post your Admin user/pass (in private reply)? so I can check what the problem is directly on your site.

Thank you.

Regards

[hoco]

I’m sorry, I’m working now on prod.gct-steuerberatung.at 😉

btw:
Color-Boxes: theres not translation in german for the “Read More”-Button (“mehr erfahren”)

[Zex]

Hello Andy!
To fix the missing social icons, Add the code below into Customize->General->Additional CSS

code:

.social-icons.e-mail:before,.fa-e-mail:before{
    content: "\f1fa";
}

.social-icons.telefon:before,.fa-telefon:before{
	content: "\f095";
}

https://prnt.sc/hqi1q8

Try this code to translate the color-boxes “Read more” button.

.tv_color_box a{
  font-size: 0px;
  text-decoration:none!important;
}

.tv_color_box a:after{ 
content: "mehr erfahren";
font-size: initial;
}

https://prnt.sc/hqixx5

Regards

[hoco]

Hi!
Thank you, it works!

I’v also added background-color for hover:

.tv-e-mail:hover { 
background-color: #A7AE11;
}

I removed the phone icon, cause it’s only useful for mobile devices.

Thanks and regards!

[Zex]

Hi,

I’m glad it works.

Cheers

[Author]

Posts