Jump to content

Search the Community

Showing results for tags 'img'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 23 results

  1. Namasthe I'm recent learner to this site. How to write a HTML image code on notepad. I can't write the code in notepad even in tryit editor. w3schools displayed options are not working only for w3schools site image working. Please guide me in this <img> tag. Thank You.
  2. Dear, I would like to put an image in a <ol> list. But the w3c validator say that we cannot put an image as a child. How i can do ? i try with figure but no way :/ This not a screening issue, it's just for the validation Thanks in advance, Error: Element img not allowed as child of element ol in this context. (Suppressing further errors from this subtree.) From line 60, column 3; to line 60, column 104 >.</li>↩ <img class="ombre" src="http://www.actunet.org/astuces/win10/images/44-2.jpg" alt="Syst&egrave;me" />↩ <ol> <li>Allez dans le mneu <b>D&eacute;marrer</b>.</li> <li>Cliquez sur la roue crant&eacute;e <b>Param&egrave;tres</b>.</li> <figure> <img src="http://www.actunet.org/astuces/win10/images/44-1.jpg" alt="D&eacute;marrer et param&egrave;tres" > <figcaption>Fig.1 - Parametres</figcaption> </figure> <li>dans <i>Param&egrave;tres</i>, cliquez sur <b>Syst&egrave;me</b>.</li> <img class="ombre" src="http://www.actunet.org/astuces/win10/images/44-2.jpg" alt="Syst&egrave;me" /> <p>Vous souhaitez le th&egrave;me sombre ? <a href="http://www.actunet.org/astuces/win10/42-activerthemesombre.php" target=_blank>cliquez ici.</a> <li>Dans le menu de gauche, cliquez sur <b>Notifications et actions</b>.</li> <img class="ombre" src="http://www.actunet.org/astuces/win10/images/44-3.jpg" alt="Notifications & actions" /> <li>D&eacute;cochez la case : <b>Afficher les notifications dans l'&eacute;cran de v&eacute;rrouillage</b>.</li> <img class="ombre" src="http://www.actunet.org/astuces/win10/images/44-4.jpg" alt="Decocher les notifications" /> <p>Les notifications seront &agrave; partir de maintenant masqu&eacute;e lors que l'&eacute;cran de verrouillage sera activ&eacute;.</p> </ol>
  3. I have looked at your manual and automatic slider ‘how to examples’, in which the img src paths are set for each media library image separately - with their absolute paths. I have written a php snippet in which the urls of a number of the most recent uploaded images are determined. I can’t find out how this snippet can be combined with the html (css and javascript) code. Could you please provide a suggestion how to tackle this, using the php code or another way of getting the most recent uploaded media library images in a slider, without the need to set the absolute paths individually. Thanks - Harry
  4. Hello everybody, I was playing with a template from the w3.css templates from w3 schools and found an issue that I can't get around. In the template called Parralax template or the forth one from top, with the man with grey hat, I saw that the home screen image was loaded from the css .bgimg-1{ min-height: 100%; background-image: url(/w3images/parallax1.jpg); } (from the style brackets after the head tag ) I wanted to do a transition between two images but only found examples on the web that it is possible only when the image is loaded from an html image tag, so I removed the "background-image" from the above css code and added an <img src="/w3images/parallax1.jpg"> tag under the div where the class name was bgimg-1: <!-- First Parallax Image with Logo Text --> <div class="bgimg-1 w3-display-container w3-opacity-min" id="home"> <img src="/w3images/parallax1.jpg"> <div class="w3-display-middle" style="white-space:nowrap;"> <span class="w3-center w3-padding-large w3-black w3-xlarge w3-wide w3-animate-opacity">MY <span class="w3-hide-small">WEBSITE</span> LOGO</span> </div> </div> However, the image now has an empty white space from it's right side and I can't make it full. Does anybody know how to fix that?
  5. Don't matter the browser size, I need that the picture ocup 100% the browser height. For this, I just set the img heith in 100vh, and the code works fine. But, I also need this image be horizontal centered in the browser. For this, I've set the text align of my DIV that contain my IMG in center. When the browser width is greater than the img width, it works fine. But, if the browser width is less than the img width, the img go left aligned. I really need that img be centered in the browser size all the time, don't matter the conditions. I just know that I can do it replacing the img for background-image and set the background-position in center. But, if I did it, Google will not index my images and it results in a big trouble for me. <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <link type="text/css" rel="stylesheet" href="code/css/test.css"> </head> <body> <div> <img src="image.jpg"> </div> </body> </html> * { margin: 0; padding: 0 } div { background-color: red; text-align: center; } img { height: 100vh; } (The picture I'm working is 1680px x 945px) At the image below I'm showing the correct horizontal align for this picture. Centered: https://uploaddeimagens.com.br/imagens/certo-jpg-feef13d2-44d2-407b-8b1b-f334107cb371 And... At this another image, I'm showing the error it ocurrs. The picture is left aligned and crop only the right side of the picture: https://uploaddeimagens.com.br/imagens/errado-jpg-746c72b8-36d2-4942-9895-0cfb43abd77d What I need is... When the browser width is less than the img width, the picture still be centered in the browser, resulting that the image would be cropped both sides, ledt and right sides, and it will result in this specifically image, the church in background will be centered in the browser all the time. It was a simple example that what I need. Is there any way for center this image like I need using only CSS? I will be very grateful to anyone who can help me with this problem. Thanks. Greetings from Brazil.
  6. Good evening. I'm creating a 3-column layout, in which the left and right columns should have their widths set to 300px, and the middle column should fit in the rest left over. Regarding the layout everything is OK, exactly as I need it. However, within the central DIV, I put an IMG, which I want to always occupy 100% of the height of this DIV and that it is centered horizontally, independently of the width of the DIV in which this IMG is contained is larger or smaller width than the width of the IMG itself. Relative to occupying 100% of the height everything is OK, no matter how I resize the browser window it is self-adjusting as desired. However, it is not getting horizontally centered, as is the goal. It is always left-aligned, except when the width of the DIV is greater than the width of the IMG, so the IMG is thus perfectly centered inside the container DIV. However, when the width of the DIV is smaller than the width of the IMG, the IMG is left-aligned, cutting portions of the image only on its right side, not getting centered as expected. I'm testing on a desktop with 1920x1080 resolution and the image I'm using at IMG is 1680x945px. Here are the HTML and CSS codes: !doctype html> <html lang="pt-br"> <head> <link type="text/css" rel="stylesheet" href="code/css/estudo.css"> </head> <body> <div id="main"> <div id="viewport_left" class="viewports"> </div> <div id="viewport_center" class="viewports"> <img id="imagem_teste" src="imagem_teste_01.jpg"> </div> <div id="viewport_right"> </div> </div> <div id="footer"> </div> </body> </html> * { margin: 0; padding: 0; text-align: center; overflow: hidden; } #main { width: 100%; margin: 0; } #viewport_left { min-height: calc(100vh - 25px); margin-bottom: 25px; width: 324px; background-color: #333333; position: fixed; left: 0; top: 0; } #viewport_center { min-height: calc(100vh - 25px); width: calc(100vw - 650px); margin-bottom: 25px; border-left: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; background-color: red; position: absolute; left: 50%; top: 50%; margin-left: calc(((100vw - 648px) / 2)* -1); margin-top: calc((100vh / 2)* -1); display: table; overflow: hidden; } #imagem_teste { max-height: calc(100vh - 25px); position: absolute; width: auto; height: auto; } #viewport_right { min-height: calc(100vh - 25px); margin-bottom: 25px; width: 324px; background-color: #333333; position: fixed; right: 0; top: 0; } #footer { position: fixed; bottom: 0; left: 0; height: 24px; width: 100%; background-color: #333333; border-top: 1px solid #FFFFFF; text-align: center; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #FFFFFF; } Does anyone know how can I fix this problem? Thank you in advance for any help and cooperation. Thank you, Evair Peterson.
  7. BACKGROUND: I am querying a MySQL database with a Matomo GUI. The API is called imageGraph. The call to the API works, as I have produced the desired image by assigning the URL as the value of an href attribute of an HTML <a> element. When using this link to display the image the image appears on a new page with its own header. This is not the effect that I desire. My goal is to display the image within a <div> tag on a webpage. The code that is suppose to achieve this latter effect is provided below. The URL that fetches the data from the API is identical for both the link and the PHP processing page for the AJAX call provided below. The PHP (./practice.php) $url ='https://.../matomo/index.php ?module=API &method=ImageGraph.get &idSite=1 &apiModule=Referrers &apiAction=getReferrerType &token_auth= ... &period=day &date=2018-04-10,2018-05-09'; $curl_request = curl_init(); curl_setopt($curl_request, CURLOPT_URL, $url); curl_exec($curl_request); curl_close($curl_request); The HTML <div id='referral_types'> <img src='' alt='Line Chart of Referral Types' /> </div> The Javascript $(document).ready(function() { $.ajax({ method: 'GET', url: "./practice.php", cache: false, contentType: 'image/png', success: function(response) { console.log(response); var graphic_src = response; $('#referral_types').find('img').attr('src', graphic_src); } }); }); EXPERIMENTATION: The console indicates that practice.php has been read, as it is filled with the kind of character nonsense typical of an image file. As the API permits an optional &format parameter I experimented with several including the following: AJAX PHP dataType JSON, &format=json dataType XML &format=xml (omit) &format=original The result was invariably the same. The ALT message with no image. Please advise. Roddy
  8. 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.
  9. harry_ord

    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; }
  10. 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.
  11. buza586

    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>
  12. 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
  13. 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
  14. 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.
  15. 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.
  16. 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
  17. 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>
  18. 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!
  19. 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?
  20. 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...
  21. jordumus

    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
  22. 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">
  23. 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.
×
×
  • Create New...