Close Button

Baboune -  
Baboune211 Posted messages 3 Status Member -
Hello,

I don't like the "basic" button!
<input type=button value="Close this window" onClick=window.close() name=button>

I would like to replace this button with an image (easy) with the function "Close the window", that's where it gets complicated?
For example:
<p align="center"><img src="Fermer.png" width="218" height="40"></p>

I should mention that "alt" doesn't work in Chrome, I replace it with "title"...

Thank you for the solution.
Best regards.

Configuration: Windows / Chrome 80.0.3987.132

2 answers

  1. jordane45 Posted messages 30426 Registration date   Status Moderator Last intervention   4 830
     
    Hello,
    And how does it complicate things?
    Did you think about adding the onclick to your image?
    Without that, it won't work.

    --
    Kind regards,
    Jordane
    1
  2. Shinobit
     
    Hello,
    uh, do you have a question?
    To help you and know what you want would be helpful...
    In any case, if you replace an input (and not a button, which is a different tag) with text (containing an image), it won't have the same effect.
    By the way, it's a strange (and mostly wrong) idea to use an input but not as an input (which is a form element used to transmit information).
    You can do it like this:

    https://forums.commentcamarche.net/forum/affich-32492757-creer-un-bouton-avec-une-image-en-html

    without forgetting to check the JavaScript in the following link as explained here (see the 3rd response because the second one is in jQuery and nothing indicates or requires you to include this library)

    https://stackoverflow.com/questions/1070760/javascript-function-in-href-vs-onclick

    Or just (let's be crazy, let's use what is needed when it's needed) use a button to have a... button.

     <button type=button onclick="window.close()" name="bouton"> <img src="monimage.png" alt="description image obligatoire ici" /> </button> 


    "I emphasize that the "alt" doesn't work in Chrome, I replace it with "title"... "

    So you are mistaken... alt is the description of the image and is not supposed to work or do anything except describe the image: it is even a mandatory attribute that must be filled (for SEO and accessibility purposes) for an image. Omitting it is a mistake (worse than using an input incorrectly, even if that's already frankly bad).

    As for the title attribute, it has nothing to do with alt since it allows (ta-da, drum roll...) to indicate other information about an element: a "title." It can often appear as a tooltip in browsers, but this is not a rule or standard and not the right way to create a tooltip.
    All the info here:

    https://www.alsacreations.com/astuce/lire/1-comment-personnaliser-une-infobulle.html

    So, it should be done in CSS (or JavaScript) but of course, if you have the basic notions of HTML that it seems you greatly lack.
    You also greatly need CSS because in HTML5 (and even for more than 15 years) this should not be written:

    <p align="center">


    check the line in red under Compatibility Notes:
    https://www.w3schools.com/tags/att_p_align.asp

    see here the correct way:
    https://www.w3schools.com/cssref/pr_text_text-align.ASP
    1
    1. Baboune211 Posted messages 3 Status Member
       
      Thank you, here is what I did:
      <p align="center"><button type=button onclick="window.close()" name="button" title="Close the window"><img src="../Close.png"></button></p></center>

      The "alt" is not there and it doesn't bother me, however the "title" gives a tooltip.

      Thanks again ...
      Baboune211
      0