<img src> not working

**NitroDev** · 11-07-2013, 04:03 PM

Here is the code:

Code:

</head>

<h1>MY CORE</h1>


<img src="button.PNG" style="width:100px" onClick="newWorld()" draggable="false" /><br>
<button onClick="credit()">Credits</button>

</body>
</html>

the button isnt just loading

**mlegg** · 11-07-2013, 05:43 PM

Is button.png located in the root of the web directory? I always load images into images/whatever.png. So you code would end up being <img src="images/button.PNG" style="width:100px" onClick="newWorld()" draggable="false" />

What is the link of the website for your question so I can look at the code?

**NitroDev** · 11-07-2013, 08:31 PM

nah heres the code so i dont have to link it:

Code:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>&nbsp;</title>

<script>
function credit()
{
document.body.innerHTML+="<pre><h3>These people helped me alot:<\/h3><br><br><a href='http://www.dynamicdrive.com/forums/'>Dynamic Drive<\/a><\/pre>"
}
function craft()
{
document.body.innerHTML="<pre><p>What do you want to craft?<\/p><button onClick='newWorld()'>Back<\/button><\/pre>"
}
function explore()
{
document.body.innerHTML="<pre><h1>Where do you want to explore?<\/h1><button onClick='newWorld()'>Back<\/button><br><button onClick='exploreNorth()'>North<\/button><\/pre>"
}

<!--Below are the explore() functions
function exploreNorth()
{
var found='a branch'
document.body.innerHTML="<pre><h4>You walk towards north and find "+found+"<\/h4><br><button onClick='explore()'>Back<\/button><\/pre>"
}
function myInventory1()
{
document.body.innerHTML="<pre>You came from first inventory item <button onClick='newWorld()'>Back<\/button><\/pre>"
}

function myInventory2()
{
document.body.innerHTML="<pre>You came from second inventory item <button onClick='newWorld()'>Back<\/button><\/pre>"
}

function myInventory3()
{
document.body.innerHTML="<pre>You came from third inventory item <button onClick='newWorld()'>Back<\/button><\/pre>"
}

function showInventory()
{
document.getElementById('inventory').style.display='block';
document.getElementById('hide_list').style.display='inline'
}

function hideInventory()
{
document.getElementById('inventory').style.display='none';
document.getElementById('hide_list').style.display='none'
}


function newWorld()
{
document.body.innerHTML="<pre><h1>Hello and welcome to World of My Core!<\/h1>What would you like to do?<br><button style='width:145px' onClick='window.location.reload()'>Exit<\/button><br><button onClick='showInventory()' style='display: inline; width: 145px'>Show Inventory Items<\/button>&nbsp;<button id='hide_list' style='display: none' onclick='hideInventory()'>Hide Inventory<\/button><ul id='inventory' style='margin-top: 10px; margin-bottom: 0px; display: none'><li onclick='myInventory1()'>first item<\/li><li onclick='myInventory2()'>second item<\/li><li onclick='myInventory3()'>third item<\/li><\/ul><br><button onClick='craft()' style='width:145px'>Craft<\/button><br><button onClick='explore()' style='width:145px'>Explore<\/button><\/pre>"
}
function charCreate()
{
document.body.innerHTML="<pre><h3>Start by choosing your name!<\/h3><br><br><input type='text' name='name'><br><br><input type='radio' name='gender' value='Male'>Male<br><input type='radio' name='gender' value='Female'>Female<br><br><button onClick='newWorld()'>New World<\/button><pre>"
}
</script>

<style>
pre{font-family: verdana; font-size: 12px}
button {font-family: arial; font-size: 13px}
button,li{cursor: pointer}
</style>
</head>

<h1>MY CORE</h1>


<img src="images/button.png" onClick="newWorld()" draggable="false" /><br>
<button onClick="credit()">Credits</button>

</body>
</html>

But it still shows me the "landscape" image not the "button.png" image