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


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 24 results

  1. 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?
  2. 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.
  3. 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.
  4. 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
  5. 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.
  6. 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; }
  7. 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.
  8. 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>
  9. JoshuaVdM

    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
  10. 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
  11. 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.
  12. MichaelInMA

    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.
  13. travd93

    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
  14. ironheartbj18

    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>
  15. 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!
  16. 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?
  17. 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...
  18. 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
  19. vbarhoskie

    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">
  20. 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.
  21. knystrom18

    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...
  22. 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!
  23. 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!
  24. 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>
×