in reply to Re: photo does not display on HTML page in Linux
in thread photo does not display on HTML page in Linux

<IMG SRC="/net/home2/ceb/bmcclint/data/brendan.jpg" WIDTH=850 HEIGHT=1000>

The HTML is OK on windows and is identical on Linux except the address is different (of course). No web server

Replies are listed 'Best First'.
Re^3: photo does not display on HTML page in Linux
by Corion (Patriarch) on Jun 01, 2017 at 16:32 UTC

    This has very little to do with Perl and is all about HTML and how your browser displays local resources.

    Are you sure that your browser will interpret this address as an address that is supposed to be loaded from a file?

    Personally, I would either add an address relative to the HTML file, like (assuming that the HTML file lives in /net/home2/ceb/bmcclint):

    <IMG SRC="./data/brendan.jpg" WIDTH=850 HEIGHT=1000>

    [download]

    Alternatively, find out how your browser interprets file:// URIs, and give it the appropriate file:// URI. Maybe it is

    <IMG SRC="file://net/home2/ceb/bmcclint/data/brendan.jpg" WIDTH=850 HE
+IGHT=1000>

    [download]

    But again, none of this has anything to do with Perl, so most likely you will find better help in the documentation (or internet searches) for your browser.

[reply]
[d/l]
[select]
      
<!DOCTYPE html>

<html>
<head>
<title>Annotator Tool</title>

<style type="text/css">
.dropbtn {
    background-color: white;
    color: #4CAF50;
    color: whitr
    padding: 8px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown_0{
    position: absolute;
    top: 10px;
    right: 160px;
    display: inline-block;
}

.dropdown_1{
    position: absolute;
    top: 35px;
    right: 160px;
    display: inline-block;
}

.dropdown_2{
    position: absolute;
    top: 60px;
    right: 160px;
    display: inline-block;
}
.dropdown_3{
    position: absolute;
    top: 85px;
    right: 160px;
    display: inline-block;
}

.dropdown_4{
    position: absolute;
    top: 110px;
    right: 160px;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: white}

.dropdown_0:hover .dropdown-content {
    display: block;
}
.dropdown_0:hover .dropbtn {
    background-color: white;
}

.dropdown_1:hover .dropdown-content {
    display: block;
}
.dropdown_1:hover .dropbtn {
    background-color: white;
}

.dropdown_2:hover .dropdown-content {
    display: block;
}
.dropdown_2:hover .dropbtn {
    background-color: white;
}

.dropdown_3:hover .dropdown-content {
    display: block;
}
.dropdown_3:hover .dropbtn {
    background-color: white;
}

.dropdown_4:hover .dropdown-content {
    display: block;
}
.dropdown_4:hover .dropbtn {
    background-color: white;
}

#bottom {
    position: fixed;
    bottom:  0;
    left: 0;
    width: 100%;
    text-align: center;
    padding:  5px;
    border-top: 3px solid blue;
    background-color: #cccccc;
    padding-bottom: 2em;
    }
    
    
.tb5 {
    position: absolute;
    color: #4CAF50;
    top: 410px;
    font-size: 14pt;
    right: 80px;
    display: inline-block;
    height: 197px
    border-color: 3px #4CAF50;
    }    

.percent {
    position: absolute;
    color: #4CAF50;
    top: 140px;
    font-size: 14pt;
    right: 80px;
    display: inline-block;
    height: 197px
    border-color: 3px #4CAF50;
    }
    
input[type=submit] {
     position: absolute;
    top: 700px;
    right: 20px;
    border: 1px solid #f44c0e;
    color: #fff;
    background: tomato;
    padding: 10px 20px;
    border-radius: 3px;
}
input[type=submit]:hover {
    background: #f44c0e;
}


</style>
</head>

<body>

<IMG SRC="/net/home2/ceb/bmcclint/data/brendan.jpg" WIDTH=850 HEIGHT=1
+000>

<!-- 
<div style="position:     absolute;
            top:        13;
            right:         10px;
            width:        20px;
            height:        600px;
            border:1px solid #000;"
</div>
-->

<div class="dropdown_0">
    <button class="dropbtn" type="button">Assignment</button>
    <div class="dropdown-content">
    <FORM ACTION = "a.pl" METHOD = "get">
    <select name="assignment" >
            <option value="Cruise_1">cruise_1</option>
    <option value="Cruise_2">cruise_2</option>
    <option value="Cruise_3">cruise_3</option>

        <option selected="selected" value="cruise">Cruise 1</option>
    </select>
</div>
</div>

<div class="dropdown_1">
  <button class="dropbtn" type="button">Biotic</button>
  <div class="dropdown-content">
<select name="Biotic" >
    <!-- constructed options -->
    <br><br><label><input type="checkbox" name="biotic" value="Anemone
+_colonial">Anemone_colonial</label>
<br><label><input type="checkbox" name="biotic" value="Anemone_solitar
+y">Anemone_solitary</label>
<br><label><input type="checkbox" name="biotic" value="BlackSeaBass">B
+lackSeaBass</label>
<br><label><input type="checkbox" name="biotic" value="BlueCrab">BlueC
+rab</label>
<br><label><input type="checkbox" name="biotic" value="BrittleStar">Br
+ittleStar</label>
<br><label><input type="checkbox" name="biotic" value="Bryozoa">Bryozo
+a</label>
<br><label><input type="checkbox" name="biotic" value="Bryozoan">Bryoz
+oan</label>
<br><label><input type="checkbox" name="biotic" value="Clams">Clams</l
+abel>
<br><label><input type="checkbox" name="biotic" value="Crab_unident">C
+rab_unident</label>
<br><label><input type="checkbox" name="biotic" value="Ctenophores">Ct
+enophores</label>
<br><label><input type="checkbox" name="biotic" value="Dogfish">Dogfis
+h</label>
<br><label><input type="checkbox" name="biotic" value="Echinoderm">Ech
+inoderm</label>
<br><label><input type="checkbox" name="biotic" value="Eel">Eel</label
+>
<br><label><input type="checkbox" name="biotic" value="Fish_unident">F
+ish_unident</label>
<br><label><input type="checkbox" name="biotic" value="Flounder">Floun
+der</label>
<br><label><input type="checkbox" name="biotic" value="HermitCrab">Her
+mitCrab</label>
<br><label><input type="checkbox" name="biotic" value="Jellyfish">Jell
+yfish</label>
<br><label><input type="checkbox" name="biotic" value="JonahCrab">Jona
+hCrab</label>
<br><label><input type="checkbox" name="biotic" value="Lobster">Lobste
+r</label>
<br><label><input type="checkbox" name="biotic" value="Mussels">Mussel
+s</label>
<br><label><input type="checkbox" name="biotic" value="OceanPout">Ocea
+nPout</label>
<br><label><input type="checkbox" name="biotic" value="RockCrab">RockC
+rab</label>
<br><label><input type="checkbox" name="biotic" value="SandDollar">San
+dDollar</label>
<br><label><input type="checkbox" name="biotic" value="SeaRobin">SeaRo
+bin</label>
<br><label><input type="checkbox" name="biotic" value="SeaStar">SeaSta
+r</label>
<br><label><input type="checkbox" name="biotic" value="Skate">Skate</l
+abel>
<br><label><input type="checkbox" name="biotic" value="SkateEggCase">S
+kateEggCase</label>
<br><label><input type="checkbox" name="biotic" value="Sponge">Sponge<
+/label>
<br><label><input type="checkbox" name="biotic" value="Urchin_green">U
+rchin_green</label>
<br><label><input type="checkbox" name="biotic" value="Urchin_purple">
+Urchin_purple</label>
<br><label><input type="checkbox" name="biotic" value="WormHoles">Worm
+Holes</label>

    <option selected="selected" value="None"></option>
</select>
</div>
</div>

<div class="dropdown_2">
  <button class="dropbtn" type="button">Bottom Type</button>
  <div class="dropdown-content">
<select name="bottom_type" >
    <!-- constructed options -->
    <br><br><label><input type="checkbox" name="bottom_type" value="Bo
+ulder">Boulder</label>
<br><label><input type="checkbox" name="bottom_type" value="Cobble">Co
+bble</label>
<br><label><input type="checkbox" name="bottom_type" value="Gravel">Gr
+avel</label>
<br><label><input type="checkbox" name="bottom_type" value="Mudstone">
+Mudstone</label>
<br><label><input type="checkbox" name="bottom_type" value="Sand">Sand
+</label>
<br><label><input type="checkbox" name="bottom_type" value="ShellHash"
+>ShellHash</label>
<br><label><input type="checkbox" name="bottom_type" value="ShellHashC
+ourse">ShellHashCourse</label>
<br><label><input type="checkbox" name="bottom_type" value="ShellHashF
+ine">ShellHashFine</label>
<br><label><input type="checkbox" name="bottom_type" value="ShellHashM
+edium">ShellHashMedium</label>
<br><label><input type="checkbox" name="bottom_type" value="Silt">Silt
+</label>
<br><label><input type="checkbox" name="bottom_type" value="SiltySand"
+>SiltySand</label>

    <option selected="selected" value="Sand"></option>
</select>
</div>
</div>

<div class="dropdown_3">
  <button class="dropbtn" type="button">Sediment</button>
  <div class="dropdown-content">
<select name="sediment" >
    <!-- constructed options -->
    <br><br><label><input type="checkbox" name="sediment" value="coars
+e">coarse</label>
<br><label><input type="checkbox" name="sediment" value="fine">fine</l
+abel>
<br><label><input type="checkbox" name="sediment" value="medium">mediu
+m</label>
<br><label><input type="checkbox" name="sediment" value="none">none</l
+abel>

    <option selected="selected" value="None">None</option>
</select>
</div>
</div>

<div class="tb5">
    Notes:
    <input type="text" name="image_notes" value="."/>
</div>

<!--
<div class="percent 
 <label for="percent">Cobble Percent:&nbsp</label><input id="percent" 
+type="number" name="cobble_percent" min="5" max="100" step="10" value
+ ="5"/>
 <br>
 <label for="percent">Sand Percent&nbsp&nbsp&nbsp:&nbsp</label><input 
+id="percent" type="number" name="sand_percent" min="5" max="100" step
+="10" value ="5"/>
 <br>
 <label for="percent">Coarse Shells&nbsp&nbsp:&nbsp</label><input id="
+percent" type="number" name="coarse_shells_percent" min="5" max="100"
+ step="10" value ="5"/>
 </div>
-->
 
<input type="submit" value="Submit"/>

</form>


<div id="bottom">
<strong>--/net/home2/ceb/bmcclint/data/brendan.jpg-- Brendan at Sussex
+</strong>
</div>

</body>
</html>

      [download]
[reply]
[d/l]

        BTW, this validator shows 27 errors in your document.

        Regards, Karl

        «The Crux of the Biscuit is the Apostrophe»

        Furthermore I consider that Donald Trump must be impeached as soon as possible

[reply]

In Section Seekers of Perl Wisdom