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
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
How do you remove unneeded space around images in HTML?
One of my images is coming to far away from the text, and it is messing up the look of the website. There is nothing wrong with the CSS I am using, but I believe because that there is too many HTML tags around it, it has a large space.
Please limit solutions to basic CSS and HTML, as per I can properly understand how it works.
EDIT: I am sorry, I was a bit vague about what my challenge was. I am using the Bootstrap Library, and have been looking a this following template:
http://www.markups.io/preview/varsity/
I really like the template, and I am occasionally taking code snippets out of it. I used the top bar, and replaced their logo with a different image. The image looks fine on desktop, but when a go on my mobile phone, it comes out what too low covering some important content. Anything you guys can do?
EDIT 2:
I have attached two photos of the look and what the problem looks like. The first one is the Desktop view (which is great), and the second one is the mobile view (which is too low). I don't have any more information... from the original post to EDIT 1, EDIT 2, that is all the info that I have.
Remove the spaces and line breaks between images:
<img src="http://placehold.it/20x20" /> <img src="http://placehold.it/20x20" />
<img src="http://placehold.it/20x20" />
to:
<img src="http://placehold.it/20x20" /><img src="http://placehold.it/20x20" /><img src="http://placehold.it/20x20" />
Put this in your css file:
img {
margin: 0;
}
or use this in-line style in your html file:
<style type="text/css">
img {
margin: 0;
}
</style>
You can use the letter-spacing propriety of CSS
img {
letter-spacing: -2px;
}
I think you should remove space between your code!
so you must change this code
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
to this code (add comment code)
<img src="1.jpg" /><!--
--><img src="2.jpg" /><!--
--><img src="3.jpg" />
or to this code (literally remove space)
<img src="1.jpg" /><img src="2.jpg" /><img src="3.jpg" />
Since the template uses twitter bootstrap,
try adding img-responsive class to your image
Example, from:
<img src="1.jpg" />
to
<img class="img-responsive" src="1.jpg" />
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.
I am completely new to Web Development, still a student. Kindly bare this extremely low level question.
I have this small HTML code:
<html>
<body>
<img scr="logo.jpg" alt"nextgen logo" width="370" height="100" />
<h1> NEXTZEN </h1>
<p> Welcome to NEXTZEN </p>
</body>
</html>
with the logo.jpg file in the exact same folder as the .html file, with the exact width and height given.
Yet, when I open the HTML page, I am not able to see the image at all. What's Wrong? What should I do?
simple typo. src, not scr
<img src="logo.jpg" alt="nextgen logo" width="370" height="100" />
<html>
<body>
<img src="logo.jpg" alt="nextgen logo" width="370" height="100" />
<!-- fix src and add in the = on the alt tag !-->
<h1> NEXTZEN </h1>
<p> Welcome to NEXTZEN </p>
</body>
</html>
You need to change scr to src in your image tag, and add an = sign as Florian pointed out.
I have this problem with my navigation bar. I have 5 .png buttons horizontaly aligned. I want to give them rollover in CSS, not JAVA.
I tried so many things but just can't seem to control it. Al the ways I tried, it wont even load the images... I don't know what to do :) I already placed them in 1 big div. Here's my code:
<div id="img">
<a id="anchor1" href="index.php" ></a>
<img src="images/nav/spacer.png" alt="" class="btn"/>
<a href="portfolio.php">
<img src="images/nav/portfolio_btn.png" name="portfolio" width="128" height="51" border="0" class="btn" id="portfolio" alt="" />
</a>
<img src="images/nav/spacer.png" alt="" class="btn"/>
<img src="images/nav/diensten_btn.png" name="bestellen" width="125" height="51" border="0" class="btn" id="diensten" alt="" />
</div>
I suggest you look into CSS sprites. Here's an example tutorial for a menu: http://praveenfrancis.com/tutorials/create-a-simple-menu-with-css-sprite/
Try putting images inside of a <a></a> then in CSS declare something like this:
a hover{
background://what you want;
}