I do not understand why the images on my site shows up as broken, if you could have a quick look at: http://www.lamcallum.com Is there someone that can solve this mystery? Any replies would be appreciated...
UPDATE: Issue is resolved.
Give your <img src="1pixelsquare1.gif"> //grey color image then it will work perfectly fine.
Your Code for each box
<div class='fade' onMouseOver="JSFX.fadeIn('button')" onMouseOut="JSFX.fadeOut('button')">
<img name="button" class="imgFader" width="100" height="100" border="0">
</a> //extra coded - remove it
</div>
Every box Img should have the "src" like this
<img name="button" class="imgFader" src="1pixelsquare1.gif" width="100" height="100" border="0">
It appears that on initial load, your images do not have a source. Which would explain why they are broken. Once mouse-over-ed they do.
ETA: More detail. The image tags do not have anything in the src property. Either in code behind, the html you have coded or js. If you post your original code I can help more.
Related
Hello so I just made an html site that I was thinking could be hosting from my computer for my home where I can stream music and share files but this line of code doesnt work.
<h3>Spotify Mod apk</h3>
<a href="Downloads/Spotify.apk" Download>
<img src="pictures/Spotify.png" alt="Spotify.apk" width="100" height="100">
I've been scrolling around for about 15 minutes and cant find any solutions the link and img src is correct but it doesnt work.
neither does this work.
<h3>BG player</h3>
<a href="Downloads/BG Player.apk" Downloads>
<img src="pictures/Bgplayer.png" width="100" heigh="100">
thanks for any help in advance please redirect this sub if I placed it wrong.
I'm trying to get the image gallery functionality from Featherlight to work. It is a jQuery add-on and I've followed their directives from their web-site (http://noelboss.github.io/featherlight/) but unfortunately I can't get it to work as intended. What I'm trying to achieve is an image gallery presentation by clicking on an image thumb. From the gallery I should be able to navigate among the images included in the gallery with previous, next icons. I've added links to the css-style file as well as the js-file. Enterd the HTML-code for the gallery and added javascript code for settings to the gallery.
I'm a newbie to javascript so it may be some very basic thing and I would really appreciate any hint on what is wrong.
Code can be found at:
http://jsfiddle.net/ovedexlin/69qZx/
HTML-code:
<div class="adImages">
<div class="row">
<a class="thumbnail gallery" href="http://www.tranarportalen.se/UpLoad/Breeders/b11000/digger.jpg">
<img src="http://www.tranarportalen.se/UpLoad/Breeders/b11000/digger.jpg" alt="thumb1" width="250" height="200">
</a>
<a class="thumbnail gallery" href="http://www.tranarportalen.se/UpLoad/Breeders/b11000/digger.jpg">
<img src="http://www.tranarportalen.se/UpLoad/Breeders/b11000/digger.jpg" alt="thumb2" width="250" height="200">
</a>
</div>
</div>
JS-code:
$(document).ready(function(){
$('a.gallery').featherlightGallery({
gallery: {
previous: '«',
next: '»',
fadeIn: 300
},
openSpeed: 300
});
});
Your code looks fine (though you may want to set width and hight with css), but you didn't include the featherlight.gallery.min.js, just the css.
Updated fiddle: http://jsfiddle.net/z28D7/
I’ve made a cardspread program that is based on the source of the image. It works allright, but it is loading slowly, because now 78 different cards are loaded. I like to speed up the loading and I thought I needed an extra item per DIV. So I added an ALT-tag to each image. Like this:
<div id="kaart1">
<alt=kaart14.jpg>
<img src="images/kaart1.jpg" width="110" height="180" onclick="showDiv(event)>
</alt=kaart14.jpg>
</div>
Now I need only 1 image to load 78 times, which is faster. The problem which I am facing now is that I want to read the alt value into a variable (in this case: kaart14.jpg).
I’ve tried :
$('.status').click(function() {
var status = $(this).attr('alt');
});
But that stays empty. Does anyone have a suggestion how to solve this in Javascript or jQuery?
First, there is no <alt> tag. It is used as alternative to <img>. The value is displayed if the image is not loaded.
It is just plain text. If you put a url there, it will just display the url and not the image itself.
Eg:
<img src="myphoto.jpg" alt="This is my photo">
There is no performance gain if you use alt or not, but you definitely SEO
Your alt attribute should be like
<div id="kaart1">
<img src="images/kaart1.jpg" alt="kaart Image" width="110" height="180" onclick="showDiv(event)>
</div>
alt is an attribute of the img tag,its not a tag itself.And as #Bergi said,the alt attribute will not be an another image.It may be the description.
?I am having an issue with a website i uploaded to test. They all work work fine when they are checked locally in Dreamweaver cs6 but when uploaded they do this, Roll over the images you will see the problem, when hovering over Texas longhorn image there is a problem and the Michigan state image isn't loading Anyone see my error.
Here is the code that matters Thanks for any help And the link to the site page http://odintest.co.nf/product_select.html
<script type="text/javascript">
function changeImage(a) {
document.getElementById("img").src=a;
}
</script>
<div id="main_img">
<img id="img" src="images/placeholder.jpg"/>
</div>
<div id="thumb_img">
<img src='images/notredamelogo.JPG' width="200" height="150" onmouseover='changeImage("images/notredame.JPG");'>
<img src="images/ohiostatelogo.jpg" onmouseover='changeImage("images/ohiostate.jpg");'>
<img src='images/michiganstatelogo.jpg' onmouseover='changeImage("images/michiganstate.jpg");'>
<img src='images/floridagatorslogo.jpg' onmouseover='changeImage("images/floridagators.jpg");'>
<img src='images/texaslonghornslogo.jpg' onmouseover='changeImage("images/texaslonghorns.jpg");'>
</div>
I don't know what problem you're describing, but I'm guessing a hover delay. Use a javascript preloader or load them in a div with styles along the lines of {position: absolute; left: -999em;} to keep them offscreen. This makes the images available immediately on hover, where normally you'd see a delay while they're downloaded.
The image at http://odintest.co.nf/images/texaslonghorns.jpg doesn't seem to exist on the server.
Well I see 2 issues.
For me the "notredamelogo.JPG" did not load. Probably because of "JPG". Try "jpg" instead.
Main image does not load for texaslonghorns. That might be because the image does not exist in that directory and/or the image name or extension is not right.
I'm using this jquery plugin which lets you scrub through images:
http://thespiral.ca/jquery/scrubber/demo/
I'm trying to add a link to each image, like this for example:
<div id="basic">
<img src="images/beach1.jpg" width="200" height="200" alt="Beach1" />
<img src="images/beach2.jpg" width="200" height="200" alt="Beach2" />
<img src="images/beach3.jpg" width="200" height="200" alt="Beach3" /></div>
But something in the script seems to be blocking links, and no matter what I do the image have a "#" link.
Can anyone help?
Update:
I put up a jsFiddle: http://jsfiddle.net/qdGXZ/
The problem may be in jquery.cycle.all.min.js. There is a code in it that may cause this kind of behaviour. Here it is:
else{a=''+(i+1)+"";}
Comment it and see what happens. This was the only piece of code in the given example that could cause this.
To fix this you need to pass href attribute defined by you to the else case and do something like this:
else{a=''+(i+1)+"";}
I don't know if this will help. Just can't do much. Now you know what is the problem and what you should do to fix it. The rest is up to you.