Jump to content

Search the Community

Showing results for tags 'img'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH


  • Community Calendar




Website URL








Found 20 results

  1. Simple CSS Center Image Responsive Compatible. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width"> <style type="text/css"> .img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: 100%; max-height: 100%; } </style> </head> <body> <img class="img" src="image.jpg"> </body> </html> Un saludo.
  2. Issue on hover

    Hello This is my website: http://cvkj.agencialosnavegantes.cl/ In the second section ("Nuestros Servicios") i have 3 big buttons that change their backgrounds to purple on hover. The problem i have is why do these buttons appear repeated below, like below every button i have an empty button repeated. Why is this happening? HTML for the buttons <div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center"> <a class="et_pb_button boton-contacto et_pb_button_0 et_pb_module et_pb_bg_layout_light" href="#"><img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-5.png" style="width:30%;"><p>Asesoría y Servicios Contable</p> </a></div> Here is the CSS related: .et_pb_button_0.et_pb_button.et_pb_module { width: 290px; border-radius: 50px 50px 50px 50px; padding: 50px ! important; margin: 1%; } .et_pb_button_0 { color: #08a121!important; background-color: #fff; border-width: 1px !important; border-color: #fff; letter-spacing: 0px; font-size: 21px; font-weight: bold !important; } .et_pb_bg_layout_light.et_pb_button_0:hover { color: #fff; background: #574586; } .et_pb_bg_layout_light.et_pb_button_0:hover p { color: #fff; }
  3. Dear W3Schools-Community, There is something not working with my code right here. It should be mentioned that I am fairly new to using JavaScript. Here is my HTML code (stripped down to the essential parts): <!DOCTYPE html> <html lang="de"> <head> <script type="text/javascript"> function change_content(contentname) { if (document.getElementById(contentname).className = 'notactive') { document.getElementById('login').className = 'notactive'; document.getElementById('news').className = 'notactive'; document.getElementById('info').className = 'notactive'; document.getElementById('websites').className = 'notactive'; var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById('content').innerHTML = this.responseText; if (contentname == 'kontakt' || contentname == 'hilfe' || contentname == 'impressum') { document.getElementById('info').className = 'active'; } else { document.getElementById(contentname).className = 'active'; } } }; xmlhttp.open('POST', contentname + 'page.php', true); xmlhttp.send(); } if (document.getElementById('info').className == 'active') { document.getElementById('dropdown-icon').src = "/ressource/images/nydoo-dropdown-icon-black.png"; } else { document.getElementById('dropdown-icon').src = "/ressource/images/nydoo-dropdown-icon-yellow.png"; } } window.onload = change_content; </script> </head> <header> <ul id="mainnavigation"> <li id="mainlist" class="dropdown"><a id="info" class="notactive" onclick="change_content(this.id);">Information<img id="dropdown-icon" style="width: 15px; height: 12px; float: right; margin-top: 7px; margin-right: 20px;" src="/ressource/images/nydoo-dropdown-icon-yellow.png" id="dropdown_icon"></a></li> </ul> </header> <body onload="change_content('login'); return false;"> <div id="content"> </div> </body> </html> What I'm trying to do is changing the color from img (id="dropdown-icon") from yellow to black whenever a (id="info") has class "active". Also the other way around (class "notactive" -> change from black to yellow). Hopefully this describes it. It maybe a simple thing. But I'm getting frustrated with this issue. Let me know if I screwed it up myself :3 Thank you very much n advance.
  4. Help with Float

    I am using the Float page in CSS from this site to teach my coding class and I was wanting students to float their image next to the paragraph and heading in the example below but I can't get it to work. Every time I have tried to add a picture it will only appear below the paragraph and not next to it. I've tried giving the image a class of "column pic", I've tried giving it it's own division and and floating it to the right, I've put these divisions in multiple places and used multiple css but I can't get it to work. I ended up using the absolute position property to move it to the position I wanted. Any help is appreciated! This is a link to the Tryit: https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_cols <!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } .header, .footer { background-color: grey; color: white; padding: 15px; } .column { float: left; padding: 15px; } .clearfix::after { content: ""; clear: both; display: table; } .menu { width: 25%; } .content { width: 75%; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu li { padding: 8px; margin-bottom: 8px; background-color: #33b5e5; color: #ffffff; } .menu li:hover { background-color: #0099cc; } </style> </head> <body> <div class="header"> <h1>Chania</h1> </div> <div class="clearfix"> <div class="column menu"> <ul> <li>The Flight</li> <li>The City</li> <li>The Island</li> <li>The Food</li> </ul> </div> <div class="column content"> <h1>The City</h1> <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> <p>You will learn more about web layout and responsive web pages in a later chapter.</p> </div> </div> <div class="footer"> <p>Footer Text</p> </div> </body> </html>
  5. W3.CSS: responsively crop image to square

    I've got this responsive image gallery, made with W3.CSS <div id="portraits" class="w3-row tab"> <div class="w3-half"> <img src="img/img1.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> <img src="img/img2.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> </div> <div class="w3-half> <img src="img/img3.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> <img src="img/img4.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> </div> </div> <--! more stuff here -->... These images are all in different aspect ratios. So at the bottom of the image gallery, the images don't match up; 1 half is longer than the other. I've looked for answers. Putting the image in the div etc... doesn't work... I'm new here, and also relatively new to css3, so if you need more information to help me out, feel free to ask. Thanks in advance! (attached document is the HTML file. I'm using w3-third instead of w3-half, doesn't matter though) portfolio.html
  6. hello, i am working with jquery, thake a look at my jsbin code. when you click on the smile icon there popups a screen. Now the IMG field should be the IMG SRC. For some reason i cant get it to display the IMG SRC, any ideas?? https://jsbin.com/lelaxam/1/edit?js,output kind regards
  7. I have a few HTMl questions: 1. Example: <img src="URL" alt="A picture of my dog, Luna, a Border Collie." title="Luna">What is the function for the title tag? When the image is not visible, the alt text will be displayed, so i do wonder, why one would add a title? What is the practical use for it? 2. We need to use entities to display certain symbols. Like "©" for a copyright entity. When i define keywords for my meta-tags, "keyword" to be more precise. Do i need to write "Pinguïn" or do i need to write "Pinguïn"?Charset is UTF-8. Thanks in advance.
  8. Image Height and Width

    On the following page you make recommendation that I feel is not correct. I know in my case it cost me a couple of hours. http://www.w3schools.com/html/html_images.asp Please note the following statements: " We suggest you use the style attribute. " If you are using Bootstrap this will interfere with the responsive nature of the image as the size of the screen changes. I suspect this would apply to other responsive frame works. You should either delete the recommendation or note the effect on responsive frame works.
  9. Align Image with Title Text

    Linked is my website that I have been working on and off for awhile. As you can see the image is not inline with the title, I realise this is probably a jquery issue that I am just not getting. Can anyone advise me on the correct tag or class I should be applying to have it inline with the title. Thank you http://mrt.guardian1.com.au:57005/test/index.php
  10. how make two center img src ?

    hello everyone i am new to this w3 this must be very exciting. I have question about the html code. How do you make the "second img src" move to the center? I am giving you the example the code... <!DOCTYPE html> <head> <style> body {text-align: center; text-align: center; background: url("https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/splash.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; color: white; font-family:Helvetica; font-size: 24px; } input[type=submit] { background: limegreen; color: black; } p { font-size: 24px; color:black; background:white; font-family:Arial; } input{ border: 0; padding: 12px; font-size: 18px; } </style> </head> <body> <img src= "https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250"> <p> Hi! I am learning how to make my very own web page! I really like blueberry muffins and long walks on the beach.</p> <input type="email" placeholder="Email"> <input type="submit"> <img src= "http://seanheritage.com/wp-content/uploads/2013/05/success.jpg" height = "250" width="250"> </body>
  11. What is the correct format for the non-pair tag like img or link in HTML5? In some sites I've read <img src="" />, with the slash at final, but in other sites (like w3schools) the format is <img src="" > without the slash. It works in both cases but I think there should be only one right way. Thanks!
  12. I have an image with the following css properties. img.mainImg { width: 100%; height: auto; max-height: 1000px; } This causes the img to resize with the browser window, while keeping it's height to width ratio. This is almost the desired effect. What I am trying to achieve, however, is for the image to stop resizing once it has reached a certain width, and then start to crop the image instead. Can this be achieved with CSS, using media queries?
  13. I've got problem, how to automatic resize height of in . Here I'am trying to make pure css slideshow, and its works, but when I scale browser window widthchanges and height - doesn't. Why? and how to fix this? more of all I'll try to use different hack/advices and use a lot of them here, but it didnt work. When I change width manualy(in css), height changes.I found that problem may be in #slides{width: 500%;...} , but I need it! How to change height dynamic in this examples? p.s. sorry for my bad english...I hope you understand me....p.p.s. what I want Is adopt it for mobile devices. I know about @media but trying to make it without it.. Tnx for any help...
  14. Max-width firefox

    Hello everone. The situation: I got images that I want to give a "max-width" attribute in CSS, so they don't mess up my screen. This works great in IE, Google Chrome and Safari, but seems to get messed up in Firefox and Opera (and old IE browsers) The code: The CSS: .tienjaar {max-width: 80%;display: block;margin-left: auto;margin-right: auto;} The html/php: <img class="tienjaar" src="some/img/url.png" alt="some alt text"/> The example: http://www.hondenvri...p?&loc=timelineI Test it in both Google Chrome and Firefox if possible, try to resize the screen, you'll see that the rightern box goes 'beyond' the screen. I am 100% sure that it is because of the images. Extra information: I am aware that I could just put a "width" instead of a "max-width", but that would mean stretching my images when they're smaller, which I prefer not to do. If you got any solution for this, thanks already!GreetingsJordumus
  15. Adding Images

    Hi all, Pls I just began my journey in HTML. At the moment I am studying the HTML tutorial and have run into a problem with the img tag. I tried implementing the example on my own system but what I get is a place holder with a big red X on my browser, as opposed to the W3 LOGO which the online text editor produced. I even tried using the same syntax to insert a local image on my computer but no success. Pls what is it I am not doing correctly? Here is my code: <img src="w3schools.jpg" width="102" height="142">
  16. The code instructions on the W3schools sample makes ALL the images on my webpage transparent on rollover.What do I do to have this apply only to certain images.I want the image I have on the left side of a home page to stay 100% opache but I want 4 boxes that become transparent on rollover, located in the #maincontent div on my home page.
  17. Phantom Image & Lightbox Script

    I'm using the script here: http://lokeshdhakar....ects/lightbox2/ As the method of displaying the images here: http://www.kylenystrom.com/new Everything works fine except for this one thing: I need to update a screenshot of a website I developed (sunset.jpg), but I don't want another image in my sites directory. So, I updated it, and overwrote it; locally and on my web server. (The file has the same name and extension, but the actual image is different.) But the old image is still displaying in the lightbox. I've overwritten both the local and server copies more than twice, but to no avail. I've removed all other images from the local directory, and deleted them from the server and predictably, the other images do not show; they're not there. But for some reason, the old "sunset.jpg" loads and displays EVERY. TIME. I've looked at the lightbox script and can't tell if it's caching images or something, but this is driving me crazy. I really don't want to have to download, unzip, and integrate a fresh copy of the lightbox script every time I update an image. Does anyone know whats going on? All my code is readily available, but I'll post it here if needed. Thanks! Edit: What's even crazier is when I type in a direct URL to the offending image, it loads and displays, but when I refresh the page, I get a 404...
  18. Hey everyone! Happy new year! So I have been working with this toggle function:variable == '' ? '' : ''In simple variable is what your toggling, then you have a parameter and if (if = ?) the second parameter is false (which you want it to be) it will do else (else = the third parameter.Now it works 99% of the time and I am having trouble when I use the img element.This is my code, any help? HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><title>Map</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><script type="text/javascript" src="js/buttons.js"></script></head><body><h2>Street View</h2><hr /><a onclick="oiseMap(this)">Interactive Map</a><div class="oiseMap"><img src="http://zeitgeist-toronto.wikispaces.com/file/view/map_oise.png/208416866/map_oise.png" width="700" /></body></html> JavaScript function oiseMap(a) {var element = a.nextSibling;while (element.className != 'oiseMap') {element = element.nextSibling;} element.innerHTML = element.innerHTML == '<img src=\"http://zeitgeist-toronto.wikispaces.com/file/view/map_oise.png/208416866/map_oise.png\" width=\"700\" />' ? '<iframe width=\"700\" height=\"500\" frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\" src=\"http://maps.google.ca/maps/ms?msa=0&msid=203146017338240958552.0004b3ca872d9d4e63b8a&ie=UTF8&t=h&vpsrc=6&ll=43.668411,-79.398692&spn=0.002014,0.00375&z=18&iwloc=0004b3ca89be3700fc4f5&output=embed\"></iframe><br /><small>View <a href=\"http://maps.google.ca/maps/ms?msa=0&msid=203146017338240958552.0004b3ca872d9d4e63b8a&ie=UTF8&t=h&vpsrc=6&ll=43.668411,-79.398692&spn=0.002014,0.00375&z=18&iwloc=0004b3ca89be3700fc4f5&source=embed\" style=\"color:#0000FF;text-align:left\">OISE</a> in a larger map</small>' : '<img src=\"http://zeitgeist-toronto.wikispaces.com/file/view/map_oise.png/208416866/map_oise.png\" width=\"700\" />';} My goal is to have the map switch from the iFrame to the image and back, the flip flop. It does not work. It always reloads the iframe... Any ideas? Thanks!
  19. Sorry for being a newbie but I badly need this code to run my project. I want to know any possible xslt code to output images. Here is my XML code:<?xml version="1.0"?><?xml-stylesheet type="text/xsl" href="sample.xslt"?><rental modTime="2011-08-30-15:02:54" status="current"><images><img id="a" modTime="2011-08-30-15:02:54" file="p2i4.jpg"/><img id="b" modTime="2011-08-30-15:02:54" file="p2i5.jpg"/><img id="c" modTime="2011-08-30-15:02:54" file="p2i6.jpg"/><img id="d" modTime="2011-08-30-15:02:54" file="p2i7.jpg"/><img id="e"/><img id="f"/><img id="g"/><img id="h"/><img id="i"/><img id="j"/><img id="k"/><img id="l"/><img id="m" modTime="2011-08-30-15:02:54" file="Photo/p2i3.jpg"/><img id="n"/><img id="o"/><img id="p"/><img id="q"/><img id="r"/><img id="s"/><img id="t"/><img id="u"/><img id="v"/><img id="w"/><img id="x"/><img id="y"/><img id="z"/></images></rental><name></name><creationDate></creationDate><author></author><copyright></copyright><authorEmail></authorEmail><authorUrl></authorUrl><version></version><description></description><files><filename>console.xml</filename><filename>p2i3.jpg</filename><filename>p2i4.jpg</filename><filename>p2i5.jpg</filename><filename>p2i6.jpg</filename><filename>p2i7.jpg</filename><filename>p3i8.jpg</filename><filename>p4i10.jpg</filename><filename>p4i9.jpg</filename><filename>p5i11.jpg</filename><filename>p5i12.jpg</filename><filename>console.xml</filename></files> Thank you in advance!
  20. I have a problem trying to figure out how to make this work. This is for the project that Ive been making lately from my work. The company have this XML file that I need to get work with my already done website and Im planning to link this one to the already made website that Ive made. Here are the codes that Ive been trying to figure out for a week now and it still doesnt work in the browser. <?xml version="1.0"?><?xml-stylesheet type="text/xsl" href="sample.xslt"?><rental modTime="2011-08-30-15:02:54" status="current"><images> <img id="a" modTime="2011-08-30-15:02:54" file="p2i4.jpg"/> <img id="b" modTime="2011-08-30-15:02:54" file="p2i5.jpg"/> <img id="c" modTime="2011-08-30-15:02:54" file="p2i6.jpg"/> <img id="d" modTime="2011-08-30-15:02:54" file="p2i7.jpg"/> <img id="e"/> <img id="f"/> <img id="g"/> <img id="h"/> <img id="i"/> <img id="j"/> <img id="k"/> <img id="l"/> <img id="m" modTime="2011-08-30-15:02:54" file="Photo/p2i3.jpg"/> <img id="n"/> <img id="o"/> <img id="p"/> <img id="q"/> <img id="r"/> <img id="s"/> <img id="t"/> <img id="u"/> <img id="v"/> <img id="w"/> <img id="x"/> <img id="y"/> <img id="z"/> </images></rental><name></name> <creationDate></creationDate> <author></author> <copyright></copyright> <authorEmail></authorEmail> <authorUrl></authorUrl> <version></version><description></description><files><filename>console.xml</filename> <filename>p2i3.jpg</filename> <filename>p2i4.jpg</filename> <filename>p2i5.jpg</filename> <filename>p2i6.jpg</filename> <filename>p2i7.jpg</filename> <filename>p3i8.jpg</filename> <filename>p4i10.jpg</filename> <filename>p4i9.jpg</filename> <filename>p5i11.jpg</filename> <filename>p5i12.jpg</filename> <filename>console.xml</filename> </files> and here is my sample XSLT code which im experimenting so I can start with the designing: <?xml version="1.0"?><xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="/"> <html> <head> <title>Our Items</title> </head> <body style="background-color: #DACFE5; font-family:Arial, Helvetica, sans-serif"> <table border="1" align="center"> <tbody> <tr> <th>Pictures</th> </tr> <xsl:for-each select="//rental"> <tr> <td> <xsl:value-of select="rental/images/img"/> </td> </tr> </xsl:for-each> </tbody> </table>