I have two similar pages made of images but on one of these pages the pictures aren't loading and when im inspecting the element it shows blank white with the size 1x1. But if i click the image's link it's loading the image on a new tab with no problem..
Working page
Not working page
These pages are pretty much only HTML/CSS with a very little jQuery.
I'm not using any ad blockers..
My Code-
<div id="content" style="text-align:center; margin-bottom:120px;">
<div id="floating-arrow"><img src="images/arrow.png" alt="meme global publishers" /></div>
<img src="images/advertisers/1.jpg" style="width:100%; height:1024px;" />
<img src="images/advertisers/2.jpg" style="width:100%; height:1024px;" />
<img src="images/advertisers/3.jpg" style="width:100%; height:1024px;" />
<img src="images/advertisers/4.jpg" style="width:100%; height:1024px;" />
<img src="images/advertisers/5.jpg" style="width:100%; height:1024px;" />
<img src="images/advertisers/6.jpg" style="width:100%; height:1024px;" />
<img src="images/advertisers/7.jpg" style="width:100%; height:1024px;" />
</div>
Why is this happening? How can i fix this please?
This problem is caused by adblocker on Chrome here. The error:
Failed to load resource: net::
http://meme.netsol.co.il/images/advertisers/4.jpg Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
You can fix this by renaming the filename/path.
Related
On a website I am building, the onmouseover/out feature is working, however the initial image that is meant to be there won't load and will instead show a blank image link like it's trying to find it. When I do mouseover, the pictures load and are fine from then on.
I've tried changing the image it tries to load initially (which is definitely in the right place as it's one of the onmouseover/out pictures that functions correctly), but it still won't load.
<header class="masthead text-center">
<div style="width:1px; height:1px; visibility:hidden; overflow:hidden">
<img class='img-responsive center-block' src="/images/people/MinION" width="500">
<a href="https://team-schwessinger.github.io/Team_B_S/" />
</div>
<img class='img-reponsive center-block' img src="images/people/MionION.png" width="500" alt="Leaf" onmouseover="this.src='images/people/Leaf.jpg';" width="500" onmouseout="this.src='images/people/MinION.jpg';" width="500" /></a>
I believe I am having an issue with
<img class='img-responsive center-block' src="/images/people/MinION" width="500">
which is meant to be there when the website loads, before any mousing occurs. The website recognises it is trying to find a picture, but can't. I am confused about this as it is able to find and use that MinION picture in the actual mouseover function.
Any help in understanding why this is happening is greatly appreciated, thank you!
Change your syntax as below, I have changed image links for me to work but you can use your relative paths.
<header class="masthead text-center">
<div style="width:1px; height:1px; visibility:hidden; overflow:hidden">
<a href="https://team-schwessinger.github.io/Team_B_S/" />
<img class='img-responsive center-block'
src="https://timedotcom.files.wordpress.com/2015/09/googles-new-logo-
5078286822539264-2-hp.gif" width="500">
</div>
<a href="https://team-schwessinger.github.io/Team_B_S/">
<img class='img-reponsive center-block' img
src="https://timedotcom.files.wordpress.com/2015/09/googles-new-logo-
5078286822539264-2-hp.gif" width="500" alt="Leaf"
onmouseover="this.src='http://www.google.com/logos/doodles/2016/st-
patricks-day-2016-4834639321497600-hp2x.gif';" width="500"
onmouseout="this.src='https://timedotcom.files.wordpress.com/2015/09/googles-new-logo-5078286822539264-2-hp.gif';" width="500" />
</a>
refer to jsFiddle
Not sure why, but none links over the images in my posts works unless it's set to position: absolute;
Summary:
No problems with neither src or href
The pointer cursor does not appear
Nothing happens when clicking on the image
The links works when I set a to position: absolute;, but then everything is misplaced and so on.
I have tried shortening it up to make it easier to debug.
Shorten HTML
<a href="#.jpg">
<img src="#.jpg" alt="Alt text" width="1200" height="800">
</a>
(Shortened) Complete HTML
<div class="clearfix"></div>
<div class="holder blacktext bildeserieholder">
<div class="container">
<div class="row">
<div class="col-md-12 centertext">
<img class="aligncenter size-full wp-image-512" src="#.jpg" alt="text" width="1200" height="800" />
<img class="aligncenter size-full wp-image-513" src="#.jpg" alt="text" width="600" height="900" />
<img class="aligncenter size-full wp-image-514" src="#.jpg" alt="text" width="1200" height="800" />
<img class="aligncenter size-full wp-image-515" src="#.jpg" alt="text" width="1200" height="800" />
<img class="aligncenter size-full wp-image-516" src="#.jpg" alt="text" width="600" height="900" />
</div>
</div>
</div>
</div>
</div>
I have tried:
Using cursor: pointer to the link attribute.
Removing all img classes
Removing all CSS on both images and links in Chrome Inspect Element
It's hard to find out where I have done something wrong, so I would really recommend checking out the page: http://goo.gl/DqXAlC
Maybe not relevant, but I will add this information anyways regarding what I am using:
Wordpress
Bootstrap
Types (custom posts etc plugin)
The images are being uploaded with Types within each posts in a WYSIWYG editor called "bildeserie". In my single PHP I have the following which echos the images:
<?php echo(types_render_field( "bildeserie", array( 'raw' => true) )); ?>
Do you have a working solution or any ideas?
Note: The problem is with the images below the header and all the text.
Solutions:
.holder img {
pointer-events: none;
}
The above is disabling the link on the image, commenting it out will make everything work.
Second solution:
a {
display:inline-block;
}
That also fixes your problem (by expanding the link to the dimensions of the image).
I would imagine that the img has a size and the link does not have a size unless set to absolute. If the a doesn't have a size, you aren't clicking on the a you are clicking on the img, give the a a size and see what happens
You should disable this line in your style.css file:
.holder img {
pointer-events: none;
}
Here I have a weebly website, but I'm trying to make my own website and implement some of the features from the weebly website to my own.
I was wondering what this feature is called and how I would implement it:
As you can see when you hover over an image a little floating tag appears, and I was just wondering if someone could tell me what it is and how I would implement it into my code:
Here is the code:
HTML
<div id="staff_images">
<center>
<img src="images/GR412.png" />
<img src="images/JoeVis.png" />
<img src="images/Scott.png" />
<img src="images/Halo.png" />
</center>
</div>
Add title=" " to your images... with the name inside the " ". That should do it.
Like this:
<img src="images/GR412.png" title="GR412" />
<img src="images/JoeVis.png" title="JoeVis" />
<img src="images/Scott.png" title="Scott" />
<img src="images/Halo.png" title="Halo" />
DEMO
The image code below works fine in Mozilla, Chrome and Safari but doesn't display in IE9.
It is saved as an image in photoshop for websites and I specified the height and width.
When I write it like this without the slash before "D:"
<img src="D:/obrazki/game.jpg" alt="game" width="1100" height="619" />
it works in IE but then it doesn't display in Mozilla.
<img src="/D:/obrazki/game.jpg" alt="game" width="1100" height="619" />
this code works fine in all browsers apart from IE
<img src="D:/obrazki/game.jpg" alt="game" width="1100" height="619" />
this one works fine in all apart from Mozilla
this is the whole div and there is not css style yet.
<section class="container">
<div class="image_carousel">
<div id="foo2">
<img src="/D:/obrazki/game.jpg" alt="game" width="1100" height="619" />
</div>
</article>
</section>
Do you think it is the extension problem and I should save the image as GIF not jpg. ?
and if I wanted to create separate code for IE would it work if I make comments like these below in my html file? and put the image code inside those comments for IE9?
<!--[if IE]>
<![endif]-->
Shouldn't the image call be:
<img src="/obrazki/game.jpg" alt="game" width="1100" height="619" />
?
Or better yet:
<img src="/obrazki/images/game.jpg" alt="game" width="1100" height="619" />
Where /obrazki would be where you have the pages/scripts to "call" your images..
What about linking to the image on a relative path:
<img src="./link/to/image.jpg"/>
ok, lets do an old and dirty solution...serve up the images for non-ie(s), then serve up the images for ie(s) via conditional comments. (sidenote: there's a few ways to do this, like using a background-image on a wrapper element around the image, but since you are relying on img elements, i'll stick to that method. so
<section class="container">
<article>
<div class="image_carousel">
<div id="foo2">
<img src="/D:/obrazki/game.jpg" alt="game" width="1100" height="619" />
<!--[if lte IE 9]><img src="D:/obrazki/game.jpg" alt="game" width="1100" height="619" /><![endif]-->
</div>
</div>
</article>
</section>
that should work...in theory. you may have fouc or positioning issues, though i doubt the fouc...it's hard to tell without seeing it live, with the rest of the document.
I have a few jpeg images on this page that, for some reason, do not show up in either Firefox or Chrome, but fine in IE 8 and 9. If I click the image URL in Firefox browser source, it shows up just fine.
http://www.chemoutsourcing.com/banners.php
The paths are correct, using a mix of both full and relative urls, and am using the IMG tag correctly. I'm very baffled at the simplicity of this.
<div style="margin:5px 0;">
600px by 160px<br />
<img src="http://www.chemoutsourcing.com/images/banner_ads/mainheader_2013_600x160.jpg" border="1" width="600" height="160" alt="" />
</div>
<div style="margin:5px 0;">
600px by 160px<br />
<img src="images/banner_ads/mainheader_Pharma_600x160.jpg" border="1" width="600" height="160" alt="" />
</div>
<div style="margin:5px 0;">
160px by 600px<br />
<img src="images/banner_ads/mainheader_2013_160x600.jpg" border="1" width="160" height="600" alt="" />
</div>
<div style="margin:5px 0;">
160px by 600px<br />
<img src="images/banner_ads/mainheader_Pharma_160x600.jpg" border="1" width="160" height="600" alt="" />
</div>
I used inspect element on chrome, and it shows the following inline styles attached to all the img elements:
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
background-position: 600px 160px;
That can't be right.
The best solutions occur by accident.
I tried viewing this page in Chrome Private mode, and they appeared fine. So that means...
The browser extension AdBlock was reading the images' subfolder "banner_ads" in the source and treating them as 3rd party content to block.
Once I rename the folder, the issue should go away on its own.
Change directory name to ensure the word 'ads' isnt there. For example: if image source is src=images/ads/your_pic.png then rename the folder 'ads' to anything but not 'ads'. for example - src=images/visitor_image/your_pic.png
This should work, if not then its not about browser, its about your re-directions.
p.s. ignore syntax mentioned here, use your own.
Cheers
Had the same problem. Figured out the picture not showing correctly was named .JPG while others were named .jpg. Renaming apparently fixed the problem for me.