This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Image mouseover Ipad

Resolved 12 replies customization general

Edwin Schlichter

10 years ago · Last reply by Support Assistants 10 years ago

Image mouseover in header first html widget doesnt work on ipads. Is it my old javascript? All works perfect fine on other devices. Could it be my javascript? Anyone an idea to load over mouseover images on ipads. Is there any plugin? Just founded this way
http://jsfiddle.net/c_kick/s9rB4/

www.ekatra.nl

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

Marcos VM 10 years, 2 months ago

Hi,

Why you use javascript to change your image mouseover in header? It is better to do it with CSS, and more simple. Someone like this:

#image { /* Here the first image*/
position: absolute;
height: 200px;
width: 200px;
background:url(image1.jpg) no-repeat;
}
#image:hover { /* Here the second image*/
background:url(image2.jpg) no-repeat;
}
#image a { /* Here if you use a link over image*/
position: absolute;
height: 200px;
width: 200px;
}

This is just a suggestion.

Regards.

Edwin Schlichter 10 years, 2 months ago

Hi,
Thanks I tried but somethings wrong. The image has a class named image and is placed in the widget like this:

In custom css I added:

#image { /* Here the first image*/
position: absolute;
height: 650px;
width: 130px;
background:url(http://www.ekatra.nl/wp-content/uploads/ekatra.jpg) no-repeat;
}
#image:hover { /* Here the second image*/
background:url(http://www.ekatra.nl/wp-content/uploads/ekatra_f2.jpg) no-repeat;
}
#image a { /* Here if you use a link over image*/
position: absolute;
height: 650px;
width: 130px;
}

Am i doing something wrong? Its not working yet so I took it offline again. Maybe you see a mistake in my code.
Thanks!

Edwin Schlichter 10 years, 2 months ago
Sorry the image url started working for an offline image.
This is the code without brackets:
a href= “http://www.ekatra.nl”></a

Marcos VM 10 years, 2 months ago

Hi,

I had seen the sourcecode of your homepage, and I can detect that the javascript on the logo is not disabled. Comment using /* */, because you use , and that method is for HTML code. When the javascript for your logo will be disabled, use that CSS:

#ekatra{ /* Here the first image*/
position: absolute;
height: 650px;
width: 130px;
background:url(http://www.ekatra.nl/wp-content/uploads/ekatra.jpg) no-repeat;
}
#ekatra:hover { /* Here the second image*/
background:url(http://www.ekatra.nl/wp-content/uploads/ekatra_f2.jpg) no-repeat;
}
#ekatra a { /* Here if you use a link over image*/
position: absolute;
height: 650px;
width: 130px;
}

Be sure that the element whose id is ekatra don’t use javascript code (onclick, etc).

Regards.

Edwin Schlichter 10 years, 2 months ago

SOLVED sofar. Tried adding different css an html and also the code you suggested. Thanks men… also tried different ways. Came out to this to get it responsuve all the way :-) :-) :) look better now also in ipad simulator http://www.responsimulator.com/?url=www.ekatra.nl
and i changed customm css while java is still working in header. Just dunnot have an ipad
: )
css:

a { 
  text-decoration: none; 
}
a:hover { 
  text-decoration: none; 
}
#masthead .site-title {
    display:none;
}
/* Header */
@media (max-width: 780px) {
	header#masthead .hgroup {
		padding-top: 0px;
	  padding-bottom: 10px;
	}
	body.responsive header#masthead .hgroup .logo {
		padding-top: 13px;
	}
}
.mobile-nav-frame {
  position: fixed;
  top: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: #4ebac4;
  font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  z-index: 999999;
}
.mobile-nav-frame .title {
  padding: 14px 12px;
  margin-bottom: 25px;
  border-bottom: 1px solid #ffffff;
  background: #4ebac4;
}
.mobile-nav-frame .title h3 {
  margin: 0px 50px;
  text-align: center;
  color: white;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  height: 1.25em;
  font: 200 20px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
.mobile-nav-frame ul {
  margin: 0px 12px;
  background: #ff8000;
  border: 1px solid #fff;
  padding: 4px 10px;
  -webkit-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.2), 0px -1px 0px rgba(255, 255, 255, 0.075);
  -moz-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.2), 0px -1px 0px rgba(255, 255, 255, 0.075);
  box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.2), 0px -1px 0px rgba(255, 255, 255, 0.075);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.mobile-nav-frame ul li {
  display: block;
  padding: 15px 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.mobile-nav-frame ul li a.link {
  display: block;
  margin-right: 30px;
  text-decoration: none;
  color: #F3F3F3;
  text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
  font-size: 17px;
  font-weight: 300;
}
/* Vantage Header Responsive Breakpoint */
@media (max-width: 780px) {
  body.responsive header#masthead .hgroup {
    text-align: center;
  }
  body.responsive header#masthead .hgroup .logo {
    float: none;
  }
  body.responsive header#masthead .hgroup .logo img {
    margin: 0 auto;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  body.responsive header#masthead .hgroup .support-text,
  body.responsive header#masthead .hgroup #header-sidebar {
    position: static;
    display: block;
    margin-top: 30px;
    max-width: 100%;
  }
  body.responsive header#masthead .hgroup .support-text img,
  body.responsive header#masthead .hgroup #header-sidebar img {
    max-width: 100%;
    height: auto;
  }
  body.responsive header#masthead .hgroup #header-sidebar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: auto;
  }
  body.responsive header#masthead .hgroup #header-sidebar .widget {
    display: block;
    margin: 0 auto;
    float: none;
  }
}

Support Assistants 10 years, 2 months ago
Hi Edwin
Glad to see you’ve made progress on this challenge. Thanks for keeping your thread updated.
Edwin Schlichter 10 years, 2 months ago
Thanks and till next time. Happy aniversaries and i come back tomorrow (lol) :-) …
Support Assistants 10 years, 2 months ago
For sure :) You too!
Edwin Schlichter 10 years, 1 month ago
Got back :-) Actually previous post is my workaround. Seems mouseover on ipad and general mouseover on images and links works totally different. Happens also on common websites. Know I need to rebuild my website again. Get another custom css?
Support Assistants 10 years, 1 month ago
The following plugin works for touch on mobile:
https://wordpress.org/plugins/img-mouseover/
Here is an example listed: https://wordpress.org/support/topic/no-instructions-6. We tested using:
```
<img class="alignnone size-medium wp-image-2897 mouseover" src="http://xxx.com/wp-content/uploads/2016/01/IMG_0500-179x300.jpg" alt="IMG_0500" width="179" height="300" oversrc="http://xxx.com/wp-content/uploads/2015/10/xxx-xxx-logo-184h.png" />
```
Unfortunately, the image only changes once when you touch it on mobile, it doesn’t change back. It works perfectly on desktop. It’s a potential solution.
Edwin Schlichter 10 years, 1 month ago
Your formest script works fine on a new website created in 5 hours time. http://www.demonnick.info/ Also copied a workaround for the transparant menu in sixteen theme. See css… However the touch on ipad create the same effect as it did on my previous homepage script. Thanks for sofar. It seems in all ways that ipads don’t fit any toast roaster :-)
.Body {
color: rgb(88, 77, 77);
font-family: ‘Arial’, sans-serif;
}
.site-header {
padding: 0.25em 4.5455%;
}
.site-header-main {
border-width: 0px 0px 2px 0px;
border-style: solid;
border-color: #584d4d;
}
div.site-header-main {
height: 80px;
}
.widget, .page-header, .page-links a, .comments-title, .comment-reply-title {
border-color: #584d4d;
border-width: 0px;
}
/* Menu button & menu on small screens */
.main-navigation li { /* needed to fix bug on Menu’s dropdown being transparent */
background-color: white;
z-index: 2000;
}
.menu-toggle {margin: 7px 0;} /* position button */
button {text-transform: none; border-radius: 5px;}
.site-header-menu {
background:white;
}
.menu-item a {padding-left: 8px;}
.page-id-5 .entry-title {display: none;}
Support Assistants 10 years, 1 month ago
Unfortunately, that seems to be the position at the moment. Sorry we don’t have anything more on this challenge.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread