I am trying to get the mousehover effect in xml, but no idea. However i followed a tutorial from youtube and tried working with html first.
However,I can not see the mouse hover effect .
BY the way I followed this link on youtube.
http://www.youtube.com/watch?v=-jfQeqd0eqc
Please help me out. One more thing I would like to know how can i convert it to xml.That is my final objective at this point.
Here is my html code.
<html>
<head>
<title>Nihar</title>
</head>
<body>
<div>
<img src="wheel.jpeg" onmouseover="src='wheel.jpeg'" onmouseout="src='wheel.jpeg'"">
</div>
</body>
</html>
The images are the same. You have to provide a different image for the onmouseover handler
Related
I'm creating a table of contents using the id linking method. How do I get it to work properly? I've triple checked and for some reason, it's not responding when I click on the link.
I've tried creating an id and name within the tag. It only seems to work for the top of page id. I'm using Shopify's blog editing feature which accepts HTML.
1. Example
<h3 id="Test">My Header Here</h3>
I've got it to work before but it's not anymore. Maybe I have to clear my cache?
you just add height at your tag
for example
<html>
<head>
</head>
<body>
<div style="height:600px">
1. Example
</div>
<div style="height:600px">
<h3 id="Test">My Header Here</h3>
</div>
</body>
</html>
The code is correct.
What happens if you try the code below instead? Both of these should be valid, so it would be weird that one works and the other doesn't.
1. Example
<a name="Test"><h3>My Header Here</h3></a>
I'm an absolute beginner in coding. In fact, I'll probably never do it again ;)
I'm trying to create this very simple website for my boyfriend as a surprise (he's a developer). And now I'm just encountering one problem after the other :(
I've decided on html (although I'm so desperate by now that I'd be willing to go with anything).
<!DOCTYPE html>
<html>
<body>
<h1>Hello, world (especially Mitchell)</h1>
<h2>I want to show you something…</h2>
<p>Remember that time when I was losing so many rounds of Quizduell that even you noticed? Well, turns out I was doing that on purpose. I was trying to spell something out for you. But as I found out the hard way, it is actually really hard to lose specific games on purpose in the exact order you need. It seemed like I needed to change my plans…</p>
<img src=“7.JPG” alt=“error” style="width:304px;height:228px;">
This is all I have so far. And it's just going to be a bit more text, a couple more images and maybe a little bit of colour and layout (if I can manage that).
Right now my biggest problem is inserting the images.
It just doesn't work :(
Can someone please help me?
You have to close all of your tags. You see the and tags, etc.? All of those tags with /'s before them are the end of a section. First of all, you need that for your <html> and <body> tags. You also need it on your image tag, but there is a special way to do so for such tags as images. Simply add a space followed by a slash at the end of the angled brackets of the image tag:
<img src=“7.JPG” alt=“error” style="width:304px;height:228px;" />
This basically allows the tag to be on one line, making code simpler.
Good job on your project so far, and good luck!
Fixed version of your code:
<!DOCTYPE html>
<html>
<body>
<h1>Hello, world (especially Mitchell)</h1>
<h2>I want to show you something…</h2>
<p>Remember that time when I was losing so many rounds of Quizduell that even you noticed? Well, turns out I was doing that on purpose. I was trying to spell something out for you. But as I found out the hard way, it is actually really hard to lose specific games on purpose in the exact order you need. It seemed like I needed to change my plans…</p>
<img src=“7.JPG” alt=“error” style="width:304px;height:228px;" />
</body>
</html>
`
In case this doesn't work, make sure 7.JPG is in the directory of the .html file. The filename is case-sensitive.
First of all, I thought that it was very sweet of you to do that!
Here is a sample html that might help you out.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="./promo_5.png" alt="Describe my picture here!" />
</body>
</html>
The body and the html is wrapped here, and the image src is using relative path to find the image.
How sweet!
I would suggest you to use a WYSIWYG (What You See Is What You Get) editor to design like Microsoft Word. After you are done with the design, go to tools > source code. There you can get the html code for your design. Simply copy the code from there and paste it within the <body></body> tag. And done! You have designed the webpage!
Link to a WYSIWYG Editor: click here
For image issues, make sure that they are placed in the same directory where the .html file is kept. It should work properly.
I am a beginner in HTML and was trying to run a code to display image in chrome browser using "textedit" (Mac).
<!doctype html>
<html>
<head>
</head>
<body>
<h1> Image addition </h1>
<p> <img src=“/Users/aman.kumar/Desktop/HTML/HTMLImage/aman.jpg”> </p>
</body>
</html>
However the image is not being displayed. attaching the screenshot of image in browser. Please helpenter image description here
I tested your code and caugth the error where you are doing mistake. You need to change double quotes to "" instead of ““ for src attribute.
Correct Syntax:
<img src="/Users/aman.kumar/Desktop/HTML/HTMLImage/aman.jpg">
Just copy this syntax from here and paste in your html page. you will get output.
You need to put a URI scheme at the beginning like file:// to tell the web browser to look on the hard drive instead of requesting the image from the internet.
So the img src should look like
<img src="file:///Users/aman.kumar/Desktop/HTML/HTMLImage/aman.jpg">
Just replace the qoutations you used in the img src
“ ”
with
" "
Please remove the fancy quotes use this.
<img src="file:///Users/aman.kumar/Desktop/HTML/HTMLImage/aman.jpg" alt="aman image">
enter image description hereThank you all for your comments, I tried each and every suggestions but didn't work. But accidentally tried the below mentioned code it worked.
Is it because of the gaps in /HTML Image/ and since the gaps have been filled with %20 it worked.
What could be the reason for same?
I am making a website and I want to make it so that if you click on a button at the bottom of the page you go to a new .html file with a different layout, but I want it to look like that new page is sliding up so that it looks like a cool transition.
Here is an example:
<!DOCTYPE html>
<html>
<body>
<p>Create a link of an image:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" width="32" height="32">
</a>
</p>
<p>No border around the image, but still a link:
<a href="default.asp">
<img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32">
</a>
</p>
</body>
</html>
I need it to be so that when you click on the picture it goes to a new page, but when it goes to that new page there is a "sliding up" transition.
Thanks!
You can use an iFrame to accomplish this:
JS Fiddle Demo
I used jQuery Transit for the transition effects:
$("#myLink").click(function () {
$('#newPage').transition({top: '0%' });
});
I am not sure if it is possible for standard navigation.
Some options that should be possible:
Use JavaScript to navigate (either by putting all on the same page or through AJAX)
Put everything on the same page and use :target and CSS transitions
For option 1 you can still have reasonable URLs in the browser if you use the history API.
I've had success using something like this: http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/
The only issue is that you may see a brief flash of the new page, which will then disappear, and then be transitioned in. This is more or less unavoidable without using iframes or something similar (something I'm generally loathe to do).
You could also try implementing something like a vertical slider , much like the coda slider but this one is developed for vertical scrolling. Demo.
I tried making these kind of transitions full page and found it difficult. (But I'm a JQ N00B)
Magic slider Offers horizontal and vertical scrolling and could be easier to implement.
Also have a look at this (tutorial here) which might be a simple solution to what you need.
Actually I think this last one is the closet to what you want
I'm trying to set up Google Sites for my own personal website:
<html>
<head>
<title>...</title>
</head>
<body background="page_bg.png" text="#000000" bgcolor="#333333">
<div align="center"><img src="content.jpg" border="0" alt=""></div>
</body>
</html>
So all I want is a background picture (I accomplished to do this under settings) and only one picture in the middle of the site itself. I was trying to get rid of all the gimmicks (such as the sidebar, shadows of the frame, etc.) but I failed. Is it even possible to do this?
The reason I use Sites is, because the web address "https://sites.google.com/site/my_name_here/" is clear, it's free and it makes my site appear in the google search.
edit, my solution: I found a template called "Blank Template (Black)" which didn't contain anything (no sidebar, etc). I added my own background picture, inserted my content.jpg and done.
I guess you have to use something like:
<body style="background:#333333 url('page_bg.png'); color=#000000;">
<div style="text-align:center;"><img src="content.jpg" border="0" alt=""></div>
</body>
Oh ok, right! I think you cannot add your own styles using html/css. But if you go to "Managing Web site" there is a "Colors and fonts" option, and there you make you own customization for some elements, like select a different background color.
Is that what you're looking for Thomas?
My solution: I found a template called "Blank Template (Black)" which didn't contain anything (no sidebar, etc). I added my own background picture, inserted my content.jpg and done.