В определено място на сайта

K

k0kicha

Registered
Не знам точно как да напиша, за да намеря подобно нещо.

Искам да направя текстов бутон в сайта си, който когато бъде натиснат да отива до опреледно място надолу в сайта, в същата страница. (просто по-надолу до определен текст).

P.S. И другото, което ми трябва е с какъв java scritp да направя, когато застана на определен текст да излиза отстрани прозорец с определена големина и изображение в него

Благодаря ;)
 
Прост пример с бутон в хедъра... ти можеш да си го сложиш където ти трябва..., но мисля, че ще схванеш идеята
Код: 
<header>
<nav id="middle-nav">
  <a href="#menu">button</a>
</nav>
</header>

....

<section id="menu">
....
съдържанието ти

</section>

по втория въпрос:
http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/
 
Супер и с двете се получи перфектно! Искрено ти благодаря :)

P.S. Отдавна имам един пост, в който никой не се включва, а мисля, че ти ще успееш да ми помогнеш и ТАМ. Може ли да го погледнеш?
 
k0kicha каза:
Супер и с двете се получи перфектно! Искрено ти благодаря :)

P.S. Отдавна имам един пост, в който никой не се включва, а мисля, че ти ще успееш да ми помогнеш и ТАМ. Може ли да го погледнеш?
Увеличете...

За нищо..

По другия ти въпрос той SVTerziev е пуснал отговор :?:
 
Да, благодарско и на него.

Имам проблем обаче със вторият скрипт от dynamic drive, който ми даде. Целта ми е да направя на няколко думи от една страница на сайтът ми, когато се отиде с мишката върху тях (hover) да излезе картинка отстрани непосредствено до думата. Пробвам с този скрипт, но се получава показване само на едно и също място, където е първата дума. Т.е. думите са ми на разлино разстояние надолу от TOP-а, а картинките ми ги показва само на едно и също, където е първата дума. Как мога да го направя да показва изображението до всяка дума?
 
HEAD

HTML: 
<head>
<title>Учебен център "Илиян Ошинов" - шофьорски курсове, професионално обучение, курс АДР</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="layout/styles/layout.css" type="text/css" />
<link rel="stylesheet" href="layout/styles/texthover.css" type="text/css" />
<script type="text/javascript" src="layout/scripts/jquery.min.js"></script>
<script type="text/javascript" src="layout/scripts/jquery.ui.min.js"></script>
<script type="text/javascript" src="layout/scripts/jquery.defaultvalue.js"></script>
<script type="text/javascript" src="layout/scripts/jquery.scrollTo-min.js"></script>
<link rel="shortcut icon" href="images/icon.png" type="image/x-icon" />
<link rel="icon" href="images/icon.png" type="image/x-icon" />
<script type="text/javascript">
$(document).ready(function () {
    $("#fullname, #validemail, #message").defaultvalue("Full Name", "Email Address", "Message");
    $('#shout a').click(function () {
        var to = $(this).attr('href');
        $.scrollTo(to, 1200);
        return false;
    });
    $('a.topOfPage').click(function () {
        $.scrollTo(0, 1200);
        return false;
    });
    $("#tabcontainer").tabs({
        event: "click"
    });
});
</script>

<script type="text/javascript" src="layout/scripts/jquery.cycle.min.js"></script>
<script type="text/javascript">
$(function() {
    $('#hpage_slider').after('<div id="fsn"><ul id="fs_pagination">').cycle({
        timeout: 5000,
        fx: 'fade',
        pager: '#fs_pagination',
        pause: 1,
        pauseOnPagerHover: 0
    });
});
</script>
<script type="text/javascript" src="layout/scripts/piecemaker/swfobject/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.cssSource = "layout/scripts/piecemaker/piecemaker.css";
flashvars.xmlSource = "layout/scripts/piecemaker/piecemaker.xml";
var params = {};
params.play = "false";
params.menu = "false";
params.scale = "showall";
params.wmode = "transparent";
params.allowfullscreen = "true";
params.allowscriptaccess = "sameDomain";
params.allownetworking = "all";
swfobject.embedSWF('layout/scripts/piecemaker/piecemaker.swf', 'piecemaker', '960', '430', '10', null, flashvars, params, null);
</script>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/bg_BG/sdk.js#xfbml=1&version=v2.4";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<style type="text/css" media="screen">
    
    .slide-out-div {
       padding: 20px;
        width: 250px;
        background: #f2f2f2;
        border: #4867aa 1px solid;
    }
    


	</style>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.tabSlideOut.v1.3.js"></script>
         
         <script>
         $(function(){
             $('.slide-out-div').tabSlideOut({
                 tabHandle: '.handle',                              //class of the element that will be your tab
                 pathToTabImage: 'images/contact_tab.jpg',          //path to the image for the tab (optionaly can be set using css)
                 imageHeight: '122px',                               //height of tab image
                 imageWidth: '40px',                               //width of tab image    
                 tabLocation: 'left',                               //side of screen where tab lives, top, right, bottom, or left
                 speed: 300,                                        //speed of animation
                 action: 'click',                                   //options: 'click' or 'hover', action to trigger animation
                 topPos: '200px',                                   //position from the top
                 fixedPosition: true                               //options: true makes it stick(fixed position) on scroll
             });
         });

         </script>
</head>

TEXTHOVER.CSS

[css]
<style type="text/css">

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0 ;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 100px;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>
[/css]

BODY


HTML: 
<tr class="dark">
            <td>Превозно средство</td>
            <td><div class="gallerycontainer"><a class="thumbnail" href="#thumb">Kawasaki ER6N<span><img src="images/kawasaki.jpg" /><br />Kawasaki ER6N</span></a></a></div></td>
          </tr>


Screenshot на проблема: С черна точка съм отбелязал позицията на курсора. Проблемът е, че изображението не излиза близко до текста върху който съм, а на вторият съвсем не на място. Целта ми е снимката да излиза диагонално плътно до текста.

8392660g.jpg

8392661B.jpg
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Горе