Skip to main content
A
ady23458124ntw3
Participating Frequently
March 7, 2022
Question

Like Rollover how to More than one image from navigator?

  • March 7, 2022
  • 2 replies
  • 744 views

.

    This topic has been closed for replies.

    2 replies

    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    March 8, 2022

    In the archaic version of Dreamweaver, rollovers and other image swaps were controlled with javascript. In general, that's really not the way it's done anymore. Over the last 15 or so versions of the program, Adobe moved away from those outdated scripts and toward CSS controlled styling. The interface element you're looking for has been gone from the program for 7 or 8 versions.

    You can still add the old scripts, but they need to be done individually, through the Behaviors Window from Design View using the Swap Image Behavior set onMouseOver, onMouseOut, onMouseDown and onMouseUp...

     

      A
      ady23458124ntw3Author
      Participating Frequently
      March 9, 2022

      Please show me a video of you Adding Image in Image in Image in Image

      BenPleysier
      Community Expert
      BenPleysierCommunity Expert
      Community Expert
      March 9, 2022

      Copy and paste the foloowing into a new document and view the result in a browser:

       

       

       

      <!doctype html>
<html>

<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Untitled Document</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
    <style>
        .nav-item.nav-link {
            background-image: url('https://i.stack.imgur.com/fnTFF.png');
            width: 120px;
            height: 50px;
            margin: 0 10px 0 0;
            display: block;
        }

        .nav-item.nav-link:hover {
            background-position: 0 100px;
        }

        .nav-item.nav-link.active {
            background-position: 0 50px;
        }
    </style>

</head>

<body id="junk">
    <header class="bg-light">
        <div class="container">
            <div class="row">
                <div class="col">
                    <nav class="navbar navbar-expand-lg navbar-light bg-light">
                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse text-danger text-center" id="navbar1_collapse">
                            <div class="navbar-nav">
                                <a class="nav-item nav-link active" href="#">Home</a>
                                <a class="nav-item nav-link" href="#">About</a>
                                <a class="nav-item nav-link" href="#">Contact</a>
                            </div>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </header>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

</html>

       

       

      Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
        B
        Community Expert
        Ben MCommunity Expert
        Community Expert
        March 7, 2022

        That navigation you are pointing to is related to the <nav> tag for HTML5 ( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav ).  Simply inserting it has nothing to do with rollover effects and is strictly for code markup. Rollover effects are controlled via css :hover psuedo class ( https://developer.mozilla.org/en-US/docs/Web/CSS/:hover ). 

        A
        ady23458124ntw3Author
        Participating Frequently
        March 7, 2022

        But remember that in a dreamweaver 8 just like image rollover. In navigator you could add more than two images!?

        B
        Community Expert
        Ben MCommunity Expert
        Community Expert
        March 7, 2022

        Yes.  What I was saying is that your screenshot is showing you highlighting "navigation" which is only going to add the HTML5 tag <nav></nav> into your code and is not related to rollovers at all, it is to structure your code. If you are simply looking for an image rollover that option is still present in the following location (Insert --> HTML --> Rollover Image).

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices