So.
First I used this <img onmouseover="preview.src=img1.src" id="img1" src="pic01.jpg" alt="Image Not Loaded"/> but it didn't work. I changed 'id' to 'name' and it worked. But name attribute is obsolete and not recommended to use. So what should I use? I'm trying to make a image gallery for my school project. And because it's a school project it must be "perfect" html. No any errors.
And btw. 'id' worked in Internet Explorer and Mozilla Firefox. But not in Google Chrome.
My whole code is this:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="thumbnails">
<img onmouseover="preview.src=img1.src" name="img1" src="image001.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img2.src" name="img2" src="image002.jpg" alt="Image Not Loaded"/>
</div>
<br>
<div class="preview" style="text-align: center;">
<img name="preview" src="image001.jpg" alt="No Image Loaded"/>
</div>
</body>
</html>
And this works in Google Chrome when I change id to name.
Likely the variables preview and/or img1 are undefined. I assume you're trying:
<img onmouseover="document.getElementById('preview').src=document.getElementById('img1').src" id="img1" src="pic01.jpg" alt="Image Not Loaded"/>
Related
I am trying to make an image page for a website and only one of the images loads. Anybody have advice?
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="main2.css">
</head>
<body bgcolor="black">
<h1 style="color:white"> Images </h1>
<div class="row">
<div class="column">
<img src="C:\Users\Scott Jackson\Downloads\boat.jpg" alt="C:\Users\Scott Jackson\Downloads\boat.jpg" class="image1" height="250">
</div>
<div class="column">
<img src="C:\Users\Scott Jackson\Downloads\boat.jpg" alt="C:\Users\Scott Jackson\Downloads\boat.jpg" class="image2" height="250">
</div>
</div>```
[1]: https://i.stack.imgur.com/YYky7.png
move your images to the same directory as your HTML files and change your img tag's src to a relative path, i.e. something like <img src="boat.jpg">
I have no idea how to add an image in Google Search.
I just want to add the image of the page in Google Search.
<body>
<div>
<img height="180" src="http://2.bp.blogspot.com/-ARWw3b8l8RI/VQ_gW2mIHtI/AAAAAAAABQc/tuzJvua7o5Q/s1600/Bisan%2BAsa%2BKo.jpg" width="320" />
</div
</body>
You must use the following code:
Method 1
<meta itemprop="image primaryImageOfPage" content="e.g./pic.jpg" />
Method 2
<body>
<div itemscope itemtype="https://schema.org/WebPage">
<img src="e.g./pic.jpg" itemprop="primaryImageOfPage" />
</div>
</body>
Also referer to:
https://schema.org/docs/gs.html
https://schema.org/primaryImageOfPage
I have the following link to css file
<head>
<link rel="stylesheet" href="css/stylesheet.css" />
</head>
<body>
<img src="images/logo/logo.png" alt="pokemonroad logo" width="270px" height="135px" />
<img src="images/banner.png" class="banner"/>
</body>
its was working fine, but now can not see css/stylesheet.css in all browsers.
Use Chrome dev tools (right-click and choose "Inspect Element") to look for the stylesheet in the Sources tab. If you don't see it, go to the Network tab in Chrome Dev Tools and refresh the page. Look for red text that would indicate a failed file load.
That said, here's how you would typically add your stylesheet to your page if all is working well. First, you should put type="text/css" as an attribute on there. And more importantly, put it in the head of the document:
<html>
<head>
<link rel="stylesheet" href="css/stylesheet.css" type="text/css"/>
</head>
<body>
<img src="images/logo/logo.png" alt="pokemonroad logo" width="270px" height="135px" />
<img src="images/banner.png" class="banner"/>
</body>
</html>
maybe is missing type and media
the directory where you have yur CSS file must be a subdirectory of the file where you are calling
<head>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" media="screen, print"/>
</head>
<body>
<img src="images/logo/logo.png" alt="pokemonroad logo" width="270px" height="135px" />
<img src="images/banner.png" class="banner"/>
</body>
I made an app in Facebook that has some simple html including an iframe containing a vimeo video. This app has worked fine for the last year or so, but all of the sudden the video doesn't show up. I've double checked the code of the page (made a stand-alone html page of it and it worked fine)
Does anybody know if Facebook has changed their policy on iframes or embedded video? If so any suggestions?
Here is a link to the app (on Facebook): https://www.facebook.com/LastFrontierHeli/app_367384316627957
And here is the code for the app:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome</title>
<style type="text/css">
<!--
.container {
height: 810px;
width: 841px;
}
-->
</style>
</head>
<body>
<div class="container">
<img src="http://www.lastfrontierheli.com/images/facebook/facebook_welcome_header.jpg" alt="header" />
<img src="http://www.lastfrontierheli.com/images/facebook/facebook_welcome_vid_left.jpg" alt="vid left" />
<iframe src="http://player.vimeo.com/video/30746400?byline=0&portrait=0" width="658" height="370" frameborder="0"></iframe>
<img src="http://www.lastfrontierheli.com/images/facebook/facebook_welcome_vid_right.jpg" alt="vid right" />
<img src="http://www.lastfrontierheli.com/images/facebook/facebook_welcome_content.jpg" alt="content" /><a href="http://www.lastfrontierheli.com" target="_blank">
<img src="http://www.lastfrontierheli.com/images/facebook/facebook_welcome_button_website.jpg" alt="website button" border="0" /></a>
<a href="http://www.facebook.com/LastFrontierHeli" target="_parent">
<img src="http://www.lastfrontierheli.com/images/facebook/facebook_welcome_button_facebook.jpg" alt="facebook button" border="0" /></a>
</div>
</body>
Any help would be greatly appreciated!
To find out what's wrong Iv'e just used Chrome Developer tools,
and under Console you could see this line:
[blocked] The page at https://367384316627957.iframehost.com/966373?signed_request=incxTmuyY3_vzi…NlciI6eyJjb3VudHJ5IjoiaWwiLCJsb2NhbGUiOiJlbl9VUyIsImFnZSI6eyJtaW4iOjIxfX19 ran insecure content from http://player.vimeo.com/video/30746400?byline=0&portrait=0.
So incase you didn't know - facebook requires all data to be encrypted (served via SSL).
just change your iframe from http://player.vimeo.. to http*s*://player.vimeo
and it should work fine.
I have a slideshow and I want to link each slide to some url, which should be easy, but it's not working.
I'm using the slider from here: http://dev7studios.com/lean-slider/
If you don't want to download the code, I guess you can just use inspect element and edit it to test it yourself.
...
<div class="slide1 lean-slider-slide">
<img src="images/1.jpg" alt="" />
</div>
...
I also tried using onclick with javascript with no luck.
<script>
function test(){
document.location.href = 'http://www.google.com';
}
</script>
<img src="images/1.jpg" alt="" onclick="test()" />
I uploaded the default demo version to my website, linking all images to google.com. I have not made any changes to the original code other than adding the links. I assume that you've already tried that but I cannot see what the issue could be. Usually problems like these have to do with paths to scripts and stylesheets but these seem pretty straightforward. At least there's a working example to go by. The code I'm using is below.
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8" />
<title>Lean Slider Demo</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="scripts/modernizr-2.6.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="../lean-slider.js"></script>
<link rel="stylesheet" href="../lean-slider.css" type="text/css" />
<link rel="stylesheet" href="sample-styles.css" type="text/css" />
</head>
<body>
<div class="slider-wrapper">
<div id="slider">
<div class="slide1">
</><img src="images/1.jpg" alt="" />
</div>
<div class="slide2">
<img src="images/2.jpg" alt="" />
</div>
<div class="slide3">
<img src="images/3.jpg" alt="" />
</div>
<div class="slide4">
<img src="images/4.jpg" alt="" />
</div>
</div>
<div id="slider-direction-nav"></div>
<div id="slider-control-nav"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var slider = $('#slider').leanSlider({
directionNav: '#slider-direction-nav',
controlNav: '#slider-control-nav'
});
});
</script>
</body>
</html>
Its not working correctly.
Expected is each image can have their own hyperlinks, but with lean-slider, only last hyperlink is applicable with all images.
In you case you have given google.com with each image so it seems it is working fine, but once you change each URL then you will notice that it is not going to last hyperlink.
Thanks,
Krishan
but the solution i cant have diferent URL´s, always take the last link; play with the css you can force the position of elements and enable yhe link for each image:
/*lean slider overwrite*/
#slider-control-nav, #slider-direction-nav
{
z-index:3;
}
.lean-slider-slide.current
{
z-index:2;
}
.lean-slider-slide.current a
{
float:left;
}