www.webdeveloper.com
+ Reply to Thread
Results 1 to 13 of 13
  1. 02-13-2013 11:26 AM #1
    Tibneo
    Tibneo is offline Registered User
    Join Date
    May 2012
    Location
    Hays, KS
    Posts
    24

    resolved [RESOLVED] Show one div while hiding itself

    hi everyone. right now i'm working on my personal portfolio website and am trying to set it up so that i can click on one image, a div shows, and the div that the image clicked was in is hidden. that way, only one div will be up at all times. the new div will then in turn be able to show the original div.

    my javascript isnt the best it could be, but what i want it to do is that when a category from div#home is clicked, div#home is hidden, while the clicked category is shown. then there will be an option to show div#home again while hiding the category again.


    javascript
    Code:
    function showHide(d){
 var div = document.getElementById(d);
 if (showHide.div&&div!=showHide.div){
  showHide.div.style.display='none';
 }
 div.style.display = div.style.display != 'block'?'block':'none';
 showHide.div=div;
}

    html
    HTML Code:
    <div id="holder"><div id="home">
<a href="javascript:show(category_one)"><img src=""><img></a>
<a href="javascript:show(category_two)"><img src=""><img></a>
<a href="javascript:show(category_three)"><img src=""><img></a>
<a href="javascript:show(category_four)"><img src=""><img></a>
<a href="javascript:show(category_five)"><img src=""><img></a>
</div>
<div id="category_one">
<a href="javascript:show(home);"><img src=""><img></a>
<a href="item1"><img src=""><img></a>
<a href="item2"><img src=""><img></a>
<a href="item3"><img src=""><img></a>
<a href="item4"><img src=""><img></a>
<a href="item5"><img src=""><img></a>
</div>
<div id="category_two">
<a href="javascript:show(home);"><img src=""><img></a>
<a href="item1"><img src=""><img></a>
<a href="item2"><img src=""><img></a>
<a href="item3"><img src=""><img></a>
<a href="item4"><img src=""><img></a>
<a href="item5"><img src=""><img></a>
</div>
<div id="category_three">
<a href="javascript:show(home);"><img src=""><img></a>
<a href="item1"><img src=""><img></a>
<a href="item2"><img src=""><img></a>
<a href="item3"><img src=""><img></a>
<a href="item4"><img src=""><img></a>
<a href="item5"><img src=""><img></a>
</div>
<div id="category_four">
<a href="javascript:show(home);"><img src=""><img></a>
<a href="item1"><img src=""><img></a>
<a href="item2"><img src=""><img></a>
<a href="item3"><img src=""><img></a>
<a href="item4"><img src=""><img></a>
<a href="item5"><img src=""><img></a>
</div>
<div id="category_five">
<a href="javascript:show(home);"><img src=""><img></a>
<a href="item1"><img src=""><img></a>
<a href="item2"><img src=""><img></a>
<a href="item3"><img src=""><img></a>
<a href="item4"><img src=""><img></a>
<a href="item5"><img src=""><img></a>
</div></div>
    can i add a "javascript:hide(category_id)" to the end of them or will i have to edit the code? im pretty new to javascript, so any help would be greatly appreciated.
    Last edited by Tibneo; 02-13-2013 at 11:59 AM.
    Reply With Quote Reply With Quote
  2. 02-13-2013 01:43 PM #2
    hackerofsorts
    hackerofsorts is offline Registered User
    Join Date
    Jan 2013
    Posts
    10
    Hi,

    If you include the jQuery library to your page you could really simply this process with .show() and .hide() built-in functions.

    Example:

    Code:
    By html id:

$('#id_name').show();
$('#other_id_name').hide();

or by class if you prefer:

$('.class_name').show();
$('.other_class_name').hide();
    Let me know if this helps,

    HOS
    Reply With Quote Reply With Quote
  3. 02-13-2013 03:29 PM #3
    JMRKER's Avatar
    JMRKER
    JMRKER is offline Super Moderator
    Join Date
    Dec 2005
    Location
    FL
    Posts
    6,947
    Your code does not make sense.
    It can be done without JQuery, but even JQuery would not be able to execute that HTML.

    Note: You define a showHide() function, but you call a show() function only.
    Why are you referencing html1 ... html5 in all the <div> block? Is this just an example of what you expect? Why?

    Can you draw a picture of what you expect with the HTML only and add the images since nothing is displayed without them?
    Reply With Quote Reply With Quote
  4. 02-14-2013 12:40 PM #4
    JMRKER's Avatar
    JMRKER
    JMRKER is offline Super Moderator
    Join Date
    Dec 2005
    Location
    FL
    Posts
    6,947

    Lightbulb

    Major change to your code to at least make it work.
    It may not be what you are looking for, but it will at least give you a start from a working display.
    Substitute your own baseURL and image lists as you did not provide anything to look at.
    The links are mostly for testing purposes. Change as necessary for your needs.

    Code:
    <!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.mainImg { height:75px; width:50px; border:1px solid black; }
.subImg { height:75px; width:50px; border:1px solid black; }
.subMenu { display:none; }
</style>

</head>
<body>
<form id="myForm" action="" method="post" onsubmit="return false">
<div id="holder">
  <div id="home">
    <a href="#" onclick="return show('category_one')"><img src="" class="mainImg"></a>
    <a href="#" onclick="return show('category_two')"><img src="" class="mainImg"></a>
    <a href="#" onclick="return show('category_three')"><img src="" class="mainImg"></a>
    <a href="#" onclick="return show('category_four')"><img src="" class="mainImg"></a>
    <a href="#" onclick="return show('category_five')"><img src="" class="mainImg"></a>
  </div>
  <div id="category_one" class="subMenu">
    <a href="#" onclick="return show('home')"><img src="" class="mainImg"></a>
    <a href="A-item1" onclick="return tempShow(this.href)"><img src="" class="subImg"></a>
    <a href="A-item2" onclick="return tempShow(this.href)"><img src="" class="subImg"></a>
    <a href="A-item3" onclick="return tempShow(this.href)"><img src="" class="subImg"></a>
    <a href="A-item4" onclick="return tempShow(this.href)"><img src="" class="subImg"></a>
    <a href="A-item5" onclick="return tempShow(this.href)"><img src="" class="subImg"></a>
  </div>
  <div id="category_two" class="subMenu">
    <a href="#" onclick="return show('home')"><img src="" class="mainImg"></a>
    <a href="#B-item1" onclick="return tempShow(this.href)"><img src="" class="subImg"></a>
    <a href="#B-item2" onclick="return tempShow(this.href)"><img src="" class="subImg"></a>
    <a href="#B-item3" onclick="return tempShow(this.href)"><img src="" class="subImg"></a>
    <a href="#B-item4" onclick="return tempShow(this.href)"><img src="" class="subImg"></a>
    <a href="#B-item5" onclick="return tempShow(this.href)"><img src="" class="subImg"></a>
  </div>
  <div id="category_three" class="subMenu">
    <a href="#" onclick="return show('home')"><img src="" class="mainImg"></a>
    <a href="#C-item1" onclick="return tempShow(this.href)"><img src="" class="subImg"></a>
    <a href="#C-item2" onclick="return tempShow(this.href)"><img src="" class="subImg"></a>
    <a href="#C-item3" onclick="return tempShow(this.href)"><img src="" class="subImg"></a>
    <a href="#C-item4" onclick="return tempShow(this.href)"><img src="" class="subImg"></a>
    <a href="#C-item5" onclick="return tempShow(this.href)"><img src="" class="subImg"></a>
  </div>
  <div id="category_four" class="subMenu">
    <a href="#" onclick="return show('home')"><img src="" class="mainImg"></a>
    <a href="#D-item1" onclick="return tempShow(this.href)"><img src="" class="subImg"></a>
    <a href="#D-item2" onclick="return tempShow(this.href)"><img src="" class="subImg"></a>
    <a href="#D-item3" onclick="return tempShow(this.href)"><img src="" class="subImg"></a>
    <a href="#D-item4" onclick="return tempShow(this.href)"><img src="" class="subImg"></a>
    <a href="#D-item5" onclick="return tempShow(this.href)"><img src="" class="subImg"></a>
  </div>
  <div id="category_five" class="subMenu">
    <a href="#" onclick="return show('home')"><img src="" class="mainImg"></a>
    <a href="#E-item1" onclick="return tempShow(this.href)"><img src="" class="subImg"></a>
    <a href="#E-item2" onclick="return tempShow(this.href)"><img src="" class="subImg"></a>
    <a href="#E-item3" onclick="return tempShow(this.href)"><img src="" class="subImg"></a>
    <a href="#E-item4" onclick="return tempShow(this.href)"><img src="" class="subImg"></a>
    <a href="#E-item5" onclick="return tempShow(this.href)"><img src="" class="subImg"></a>
  </div>
</div>
</form>

<script type="text/javascript">
var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var mainImgList = ['PANIC.JPG','BuzzLite.JPG','CALVIN5.JPG','RUNNOSE.JPG','SERVICE.JPG'];
var subImgList = [
   '11.jpg','12.jpg','13.jpg','14.jpg','15.jpg',
   '21.jpg','22.jpg','23.jpg','24.jpg','25.jpg',
   '31.jpg','32.jpg','33.jpg','34.jpg','35.jpg',
   '41.jpg','42.jpg','43.jpg','44.jpg','45.jpg',
   '51.jpg','52.jpg','53.jpg','54.jpg','55.jpg'];

function show(IDS) {
  var sel = document.getElementById('holder').getElementsByTagName('div');
  for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
  document.getElementById(IDS).style.display = 'block';
  return false;
}

function tempShow(info) { alert(info); return false; }

window.onload = function() {
  var tmp = m = n = 0; 
  var sel = document.getElementById('holder').getElementsByTagName('img');
  for (var i=0; i<sel.length; i++) {
    if (sel[i].className == 'subImg') {
      sel[i].src = baseURL+subImgList[m];
      sel[i].title = i+':'+m+': '+subImgList[m];
      m++;
    }
    if (sel[i].className == 'mainImg') {
      tmp = n % mainImgList.length;
      sel[i].src = baseURL+mainImgList[tmp];
      sel[i].title = i+':'+n+':'+tmp+' : '+mainImgList[tmp];
      n++;
    }
  }
}
</script>

</body>
</html>
    Reply With Quote Reply With Quote
  5. 02-14-2013 02:10 PM #5
    Tibneo
    Tibneo is offline Registered User
    Join Date
    May 2012
    Location
    Hays, KS
    Posts
    24
    http://tibneo.deviantart.com/art/Raw...Page-354281360

    click that link above. that's how i want it to function.

    i can give some more information. i have a total of 6 divs, each with a table of 3 rows and 2 columns, and each cell has its own rollover image. #home (which will be the first div shown), and 5 hidden subcategories. in #home, there are 5 rollover images, which link to all 5 of the hidden categories. when the image linked to #category1 is clicked, #category1 should appear, and #home should disappear. in #category1, there is also an image that links to #home. when #home is clicked inside of #category1, #category1 should disappear, and #home should reappear. all 5 subcategories should be able to do this.

    and i have this as my CSS

    Code:
    #holder {
	text-indent: 0px;
	text-align: center;
}
#holder table {
	border: 1px solid #000;
	background-image: url();
	height: 322px;
}
#home {
}
#category1, #category2, #category3, #category4, #category5 {
	display:none;
}
    im just having trouble compiling the script and giving the links to the images that are associated with making this work.

    i want to be able to click a category image that will both hide the category div that it is in AND show the category that is associated with the image clicked.
    Last edited by Tibneo; 02-14-2013 at 02:49 PM.
    Reply With Quote Reply With Quote
  6. 02-14-2013 04:18 PM #6
    Tibneo
    Tibneo is offline Registered User
    Join Date
    May 2012
    Location
    Hays, KS
    Posts
    24
    i'm just going to restart from scratch. im likely doing something wrong.
    Reply With Quote Reply With Quote
  7. 02-14-2013 04:22 PM #7
    JMRKER's Avatar
    JMRKER
    JMRKER is offline Super Moderator
    Join Date
    Dec 2005
    Location
    FL
    Posts
    6,947
    Why not just create the "Home" page with links to replace current page when link is chosen?

    Then, in each page shown, have a link to go back to "Home" display?

    What it appears you are trying to do is create a "modifed" tabulature display.
    There are lots of them available with a google search or a search of this forum.

    Am I not understanding your requirements?
    Reply With Quote Reply With Quote
  8. 02-14-2013 11:00 PM #8
    JMRKER's Avatar
    JMRKER
    JMRKER is offline Super Moderator
    Join Date
    Dec 2005
    Location
    FL
    Posts
    6,947
    I'm not sure I understood your requirements from your picture, so this is juat a SWAG.
    It is basically a template for whatever contents you are trying to display, ie: Not the final product.

    Code:
    <!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.subImg { height:200px; width:150px; border:1px solid black; }
.subMenu { display:none; }
#home th { height:100px; width:100px; font-size:5em; }

#category_one th { height:100px; width:100px; font-size:5em; }
#category_two th { height:100px; width:100px; font-size:5em; }
#category_three th { height:100px; width:100px; font-size:5em; }
#category_four th { height:100px; width:100px; font-size:5em; }
#category_five th { height:100px; width:100px; font-size:5em; }
#category_six th { height:100px; width:100px; font-size:5em; }
</style>

</head>
<body>
<form id="myForm" action="" method="post" onsubmit="return false">
<center>

  <table id="home" border="1"><tr>
   <caption style="font-size:3em"><h1 id="homeH1 style="text-align:center;">Home</h1><caption>
   <th><a href="#" onclick="return show('category_one')">1</a></th>
   <th><a href="#" onclick="return show('category_two')">2</a></th>
   <th><a href="#" onclick="return show('category_three')">3</a></th>
  </tr><tr>
   <th><a href="#" onclick="return show('category_four')">4</a></th>
   <th><a href="#" onclick="return show('category_five')">5</a></th>
   <th><a href="#" onclick="return false">6</a></th>
  </tr></table>

  <table id="category_one" class="subMenu" border="1">
    <tr>
    <th><a href="#" onclick="return show('home')">Home</a></th>
    <th><a href="A-item1" onclick="return tempShow(this.href)"><img src="" class="subImg"></a></th>
    <th><a href="A-item2" onclick="return tempShow(this.href)"><img src="" class="subImg"></a></th>
    </tr><tr>
    <th><a href="A-item3" onclick="return tempShow(this.href)"><img src="" class="subImg"></a></th>
    <th><a href="A-item4" onclick="return tempShow(this.href)"><img src="" class="subImg"></a></th>
    <th><a href="A-item5" onclick="return tempShow(this.href)"><img src="" class="subImg"></a></th>
    </tr>
  </table>

  <table id="category_two" class="subMenu" border="1">
    <tr>
    <th><a href="#" onclick="return show('home')">Home</a></th>
    <th><a href="B-item1" onclick="return tempShow(this.href)"><img src="" class="subImg"></a></th>
    <th><a href="B-item2" onclick="return tempShow(this.href)"><img src="" class="subImg"></a></th>
    </tr><tr>
    <th><a href="B-item3" onclick="return tempShow(this.href)"><img src="" class="subImg"></a></th>
    <th><a href="B-item4" onclick="return tempShow(this.href)"><img src="" class="subImg"></a></th>
    <th><a href="B-item5" onclick="return tempShow(this.href)"><img src="" class="subImg"></a></th>
    </tr>
  </table>

  <table id="category_three" class="subMenu" border="1">
    <tr>
    <th><a href="#" onclick="return show('home')">Home</a></th>
    <th><a href="C-item1" onclick="return tempShow(this.href)"><img src="" class="subImg"></a></th>
    <th><a href="C-item2" onclick="return tempShow(this.href)"><img src="" class="subImg"></a></th>
    </tr><tr>
    <th><a href="C-item3" onclick="return tempShow(this.href)"><img src="" class="subImg"></a></th>
    <th><a href="C-item4" onclick="return tempShow(this.href)"><img src="" class="subImg"></a></th>
    <th><a href="C-item5" onclick="return tempShow(this.href)"><img src="" class="subImg"></a></th>
    </tr>
  </table>

  <table id="category_four" class="subMenu" border="1">
    <tr>
    <th><a href="#" onclick="return show('home')">Home</a></th>
    <th><a href="D-item1" onclick="return tempShow(this.href)"><img src="" class="subImg"></a></th>
    <th><a href="D-item2" onclick="return tempShow(this.href)"><img src="" class="subImg"></a></th>
    </tr><tr>
    <th><a href="D-item3" onclick="return tempShow(this.href)"><img src="" class="subImg"></a></th>
    <th><a href="D-item4" onclick="return tempShow(this.href)"><img src="" class="subImg"></a></th>
    <th><a href="D-item5" onclick="return tempShow(this.href)"><img src="" class="subImg"></a></th>
    </tr>
  </table>

  <table id="category_five" class="subMenu" border="1">
    <tr>
    <th><a href="#" onclick="return show('home')">Home</a></th>
    <th><a href="E-item1" onclick="return tempShow(this.href)"><img src="" class="subImg"></a></th>
    <th><a href="E-item2" onclick="return tempShow(this.href)"><img src="" class="subImg"></a></th>
    </tr><tr>
    <th><a href="E-item3" onclick="return tempShow(this.href)"><img src="" class="subImg"></a></th>
    <th><a href="E-item4" onclick="return tempShow(this.href)"><img src="" class="subImg"></a></th>
    <th><a href="E-item5" onclick="return tempShow(this.href)"><img src="" class="subImg"></a></th>
    </tr>
  </table>

</center>
</form>

<script type="text/javascript">
var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var subImgList = [
   '11.jpg','12.jpg','13.jpg','14.jpg','15.jpg',
   '21.jpg','22.jpg','23.jpg','24.jpg','25.jpg',
   '31.jpg','32.jpg','33.jpg','34.jpg','35.jpg',
   '41.jpg','42.jpg','43.jpg','44.jpg','45.jpg',
   '51.jpg','52.jpg','53.jpg','54.jpg','55.jpg'];

function show(IDS) {
  var sel = document.getElementsByTagName('table');
  for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
  document.getElementById(IDS).style.display = 'block';
  return false;
}

function tempShow(info) { alert(info); return false; }

window.onload = function() {
  var tmp = m = n = 0; 
  var sel = document.getElementsByTagName('img');
  for (var i=0; i<sel.length; i++) {
    if (sel[i].className == 'subImg') {
      sel[i].src = baseURL+subImgList[m];
      sel[i].title = i+':'+m+': '+subImgList[m];
      m++;
    }
  }
}
</script>
</body>
</html>
    Reply With Quote Reply With Quote
  9. 02-15-2013 08:37 PM #9
    Tibneo
    Tibneo is offline Registered User
    Join Date
    May 2012
    Location
    Hays, KS
    Posts
    24
    well, after completely reorganizing, i have the 6 divs, #home, #icons, #rain, #school, #walls, and #misc. #home, obviously, will be visible when the page is loaded. inside each of the six divs, there are 6 MORE divs. here's my new code.

    HTML
    Code:
      <div id="holder">
    <div id="home">
      <div id="category_a"><a href="#" onclick="return tempShow(icons)">Icons</a></div>
      <div id="category_b"><a href="#">Rain</a></div>
      <div id="category_c"><a href="#">School</a></div>
      <div id="category_d"><a href="#">Walls</a></div>
      <div id="category_e"><a href="#">Misc</a></div>
      <div class="category_f"></div>
    </div>
    <div id="icons">
      <div id="category_g"><a href="#">Back</a></div>
      <div id="a_1"><a href="#">ITEM</a></div>
      <div id="a_2"><a href="#">ITEM</a></div>
      <div id="a_3"><a href="#">ITEM</a></div>
      <div id="a_4"><a href="#">ITEM</a></div>
      <div id="a_5"><a href="#">ITEM</a></div>
    </div>
    <div id="rain">
      <div id="category_g"><a href="#">ITEM</a></div>
      <div id="b_1"><a href="#">ITEM</a></div>
      <div id="b_2"><a href="#">ITEM</a></div>
      <div id="b_3"><a href="#">ITEM</a></div>
      <div id="b_4"><a href="#">ITEM</a></div>
      <div id="b_5"><a href="#">ITEM</a></div>
    </div>
    <div id="school">
      <div id="category_g"><a href="#">Back</a></div>
      <div id="c_1"><a href="#">ITEM</a></div>
      <div id="c_2"><a href="#">ITEM</a></div>
      <div id="c_3"><a href="#">ITEM</a></div>
      <div id="c_4"><a href="#">ITEM</a></div>
      <div class="category_f"></div>
    </div>
    <div id="walls">
      <div id="category_g"><a href="#">Back</a></div>
      <div id="d_1"><a href="#">ITEM</a></div>
      <div id="d_2"><a href="#">ITEM</a></div>
      <div id="d_3"><a href="#">ITEM</a></div>
      <div class="category_f"></div>
      <div class="category_f"></div>
    </div>
    <div id="misc">
      <div id="category_g"><a href="#">Back</a></div>
      <div id="e_1"><a href="#">ITEM</a></div>
      <div id="e_2"><a href="#">ITEM</a></div>
      <div class="category_f"></div>
      <div class="category_f"></div>
      <div class="category_f"></div>
    </div>
  </div>

    and CSS:
    Code:
    #holder p a { text-align: left; text-indent: -5000px; }

#holder #home, #holder #icons, #holder #rain, #holder #school, #holder #walls, #holder misc {
	height: 260px;
	width: 390px;
	margin: auto;
	padding-top: 0.5in;
	text-align: left;
}

#icons, #rain, #school, #walls, #misc { display:none; }

#category_a a { background-image: url(/public_html/portfolio/0213/A.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#category_b a { background-image: url(/public_html/portfolio/0213/B.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#category_c a { background-image: url(/public_html/portfolio/0213/C.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#category_d a { background-image: url(/public_html/portfolio/0213/D.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#category_e a { background-image: url(/public_html/portfolio/0213/E.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

.category_f { background-image: url(/public_html/portfolio/0213/F.png); background-position: right; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#category_g a { background-image: url(/public_html/portfolio/0213/G.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }


#home a:hover, #icons a:hover, #rain a:hover, #school a:hover, #walls a:hover, #misc a:hover { background-position: center 0; }

#home a:active, #icons a:active, #rain a:active, #school a:active, #walls a:active, #misc a:active { background-position: right 0; }


#a_1 a { background-image: url(/public_html/portfolio/0213/A_1.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#a_2 a { background-image: url(/public_html/portfolio/0213/A_2.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#a_3 a { background-image: url(/public_html/portfolio/0213/A_3.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#a_4 a { background-image: url(/public_html/portfolio/0213/A_4.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#a_5 a { background-image: url(/public_html/portfolio/0213/A_5.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }


#b_1 a { background-image: url(/public_html/portfolio/0213/B_1.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#b_2 a { background-image: url(/public_html/portfolio/0213/B_2.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#b_3 a { background-image: url(/public_html/portfolio/0213/B_3.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#b_4 a { background-image: url(/public_html/portfolio/0213/B_4.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#b_5 a { background-image: url(/public_html/portfolio/0213/B_5.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }


#c_1 a { background-image: url(/public_html/portfolio/0213/C_1.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#c_2 a { background-image: url(/public_html/portfolio/0213/C_2.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#c_3 a { background-image: url(/public_html/portfolio/0213/C_3.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#c_4 a { background-image: url(/public_html/portfolio/0213/C_4.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }


#d_1 a { background-image: url(/public_html/portfolio/0213/D_1.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#d_2 a { background-image: url(/public_html/portfolio/0213/D_2.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#d_3 a { background-image: url(/public_html/portfolio/0213/D_3.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }


#e_1 a { background-image: url(/public_html/portfolio/0213/E_1.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#e_2 a { background-image: url(/public_html/portfolio/0213/E_2.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }


    As you can tell, the images aren't in <img> code, rather, they're just backgrounds of the individual DIVs.
    Reply With Quote Reply With Quote
  10. 02-15-2013 09:29 PM #10
    JMRKER's Avatar
    JMRKER
    JMRKER is offline Super Moderator
    Join Date
    Dec 2005
    Location
    FL
    Posts
    6,947

    Question

    So, does it work to your satisfaction? I don't see any JS involved in your code.

    I am unable to see any images since they don't seem to be available except on your local computer or your ISP.
    In fact, I don't even see the HTML display. Do you have a working copy at some link location?

    If you are done, then mark the thread resolved.
    Reply With Quote Reply With Quote
  11. 02-15-2013 09:39 PM #11
    Tibneo
    Tibneo is offline Registered User
    Join Date
    May 2012
    Location
    Hays, KS
    Posts
    24
    i still havent figured it out.
    here's my website so you can see what i have.

    http://tibneo.hostoi.com/portfolio/
    Reply With Quote Reply With Quote
  12. 02-15-2013 10:43 PM #12
    JMRKER's Avatar
    JMRKER
    JMRKER is offline Super Moderator
    Join Date
    Dec 2005
    Location
    FL
    Posts
    6,947
    Link is broke.
    Reply With Quote Reply With Quote
  13. 02-15-2013 10:44 PM #13
    Tibneo
    Tibneo is offline Registered User
    Join Date
    May 2012
    Location
    Hays, KS
    Posts
    24
    try again? maybe its your browser?

    never mind. with trial and error, was able to figure it out!! thanks so much for all the help. i found refuge in this code:

    HTML Code:
    <html>
<head>
<title>untitled</title>
<style type="text/css">
#holder {
	clear: both;
	white-space: normal;
	text-align: center;
	text-indent: 0px;
	height: auto;
}
#holder a {
	text-align: left;
	margin: 0px;
	height: 130px;
	width: 130px;
}

#holder p a { text-align: left; text-indent: -5000px; }

#holder #home, #holder #icons, #holder #rain, #holder #school, #holder #walls, #holder #misc {
	height: 260px;
	width: 390px;
	margin: auto;
	padding-top: 0.5in;
	text-align: left;
}

#icons, #rain, #school, #walls, #misc { display:none; }

#category_a a { background-image: url(portfolio/0213/A.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#category_b a { background-image: url(portfolio/0213/B.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#category_c a { background-image: url(portfolio/0213/C.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#category_d a { background-image: url(portfolio/0213/D.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#category_e a { background-image: url(portfolio/0213/E.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#category_f { background-image: url(portfolio/0213/F.png); background-position: right; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

.category_g a { background-image: url(portfolio/0213/G.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }


#home a:hover, #icons a:hover, #rain a:hover, #school a:hover, #walls a:hover, #misc a:hover { background-position: center 0; }

#home a:active, #icons a:active, #rain a:active, #school a:active, #walls a:active, #misc a:active { background-position: right 0; }


#a_1 a { background-image: url(portfolio/0213/A_1.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#a_2 a { background-image: url(portfolio/0213/A_2.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#a_3 a { background-image: url(portfolio/0213/A_3.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#a_4 a { background-image: url(portfolio/0213/A_4.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#a_5 a { background-image: url(portfolio/0213/A_5.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }


#b_1 a { background-image: url(portfolio/0213/B_1.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#b_2 a { background-image: url(portfolio/0213/B_2.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#b_3 a { background-image: url(portfolio/0213/B_3.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#b_4 a { background-image: url(portfolio/0213/B_4.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#b_5 a { background-image: url(portfolio/0213/B_5.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }


#c_1 a { background-image: url(portfolio/0213/C_1.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#c_2 a { background-image: url(portfolio/0213/C_2.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#c_3 a { background-image: url(portfolio/0213/C_3.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#c_4 a { background-image: url(portfolio/0213/C_4.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }


#d_1 a { background-image: url(portfolio/0213/D_1.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#d_2 a { background-image: url(portfolio/0213/D_2.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#d_3 a { background-image: url(portfolio/0213/D_3.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }


#e_1 a { background-image: url(portfolio/0213/E_1.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }

#e_2 a { background-image: url(portfolio/0213/E_2.png); background-position: left; float:left; height: 130px; width: 130px; display:block; text-indent: -5000px; }
</style>





<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#category_a").click(function(){
  $("#icons").show();
  $("#home").hide();
  });

$(document).ready(function(){
  $("#category_b").click(function(){
  $("#rain").show();
  $("#home").hide();
  });
  });

$(document).ready(function(){
  $("#category_c").click(function(){
  $("#school").show();
  $("#home").hide();
  });
});

$(document).ready(function(){
  $("#category_d").click(function(){
  $("#walls").show();
  $("#home").hide();
  });
  });
  
$(document).ready(function(){
  $("#category_e").click(function(){
  $("#misc").show();
  $("#home").hide();
  });
  });

  $(".category_g").click(function(){
  $("#home").show();
  $("#icons, #rain, #school, #walls, #misc").hide();
  });
});
</script>







</head>
<body>
  <div id="holder">
    <div id="home">
      <div id="category_a"><a>Icons</a></div>
      <div id="category_b"><a>Rainmeter</a></div>
      <div id="category_c"><a>School Projects</a></div>
      <div id="category_d"><a>Wallpapers</a></div>
      <div id="category_e"><a>Miscellaneous</a></div>
      <div id="category_f"></div>
    </div>
    <div id="icons">
      <div class="category_g"><a>Back</a></div>
      <div id="a_1"><a href="buttons/">Buttons</a></div>
      <div id="a_2"><a href="frost2/">Frost2</a></div>
      <div id="a_3"><a href="frost2blk/">Frost2 BLK</a></div>
      <div id="a_4"><a href="ikon/">iKon</a></div>
      <div id="a_5"><a href="inebula/">iNebula</a></div>
    </div>
    <div id="rain">
      <div class="category_g"><a>Back</a></div>
      <div id="b_1"><a href="barpro/">Bar Pro</a></div>
      <div id="b_2"><a href="barprov2/">Bar Pro v2</a></div>
      <div id="b_3"><a href="buttonbar/">Button Bar</a></div>
      <div id="b_4"><a href="dektos/">Dektos</a></div>
      <div id="b_5"><a href="itunesillustro/">iTunes Illustro</a></div>
    </div>
    <div id="school">
      <div class="category_g"><a>Back</a></div>
      <div id="c_1"><a href="bv/">Ben Vestito - BV</a></div>
      <div id="c_2"><a href="i-do/">"I Do." Wine</a></div>
      <div id="c_3"><a href="office-clips/">Office Clips</a></div>
      <div id="c_4"><a href="xpush/">XPush</a></div>
      <div id="category_f"></div>
    </div>
    <div id="walls">
      <div class="category_g"><a>Back</a></div>
      <div id="d_1"><a href="applebold/">Apple Bold</a></div>
      <div id="d_2"><a href="strange-stencil/">Strange Stencil Coll.</a></div>
      <div id="d_3"><a href="strange-stencil-mobile/">Strange Stencil Mobile</a></div>
      <div id="category_f"></div>
      <div id="category_f"></div>
    </div>
    <div id="misc">
      <div class="category_g"><a>Back</a></div>
      <div id="e_1"><a href="soldat/">Soldat</a></div>
      <div id="e_2"><a href="spiderstrange/">SpiderStrange</a></div>
      <div id="category_f"></div>
      <div id="category_f"></div>
      <div id="category_f"></div>
    </div>
  </div>
</body>
    Last edited by Tibneo; 02-15-2013 at 11:38 PM.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

     

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Forum Rules

 HTML5 Development Center



Recent Articles